exports.noteMenus = [
  {
    label: "临时纪要",
    children: [
      {
        label: "杂记单",
        topics: [
          {
            id: "01010101",
            status: 1,
            cont_type: 1,
            content: [
              "合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容高度概括， ⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可",
              [
                "语义化的 HTML 代码，符合W3C规范：语义化代码让",
                {
                  content: "搜索引擎",
                  explain: "这是对搜索引擎的解释内容",
                },
                "容易理解网⻚",
              ],
              "重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下， 有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取",
              "重要内容不要用 js 输出：爬虫不会执⾏js获取内容",
              [
                {
                  levels: {
                    1: 5,
                  },
                  content: "少用 iframe ：搜索引擎不会抓取 iframe 中的内容",
                },
              ],
              [
                {
                  content: "⾮装饰性图片必须加 alt",
                  levels: {
                    3: 5,
                  },
                },
              ],
              [
                {
                  content: "提高网站速度： 网站速度是搜索引擎排序的⼀个重要指标",
                  levels: {
                    3: 5,
                  },
                },
              ],
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 1,
            title: [
              {
                content: "前端需要注意哪些SEO优化？",
                levels: {
                  2: 5,
                  3: 5,
                  4: 5,
                  5: 5,
                  6: 5,
                },
              },
            ],
          },
          {
            id: "01010102",
            status: 1,
            cont_type: 1,
            content: [
              "通常当鼠标滑动到元素上的时候显示",
              "alt 是 <img/> 的特有属性， 是图片内容的等价描述，用于图片⽆法加载时显示 、读屏器阅读图片 。可提图片高可访问性， 除了纯装饰图片外都必须设置有意义的值， 搜索引擎会重点分析。",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 2,
            title: "<img> 的 title 和 alt 有什么区别",
          },
          {
            id: "01010103",
            status: 1,
            cont_type: 1,
            content: [
              [
                {
                  content: "GET：发送⼀个请求来取得服务器上的某⼀资源",
                  levels: {
                    3: 1,
                  },
                },
              ],
              [
                {
                  content: "POST：向 URL 指定的资源提交数据或附加新的数据",
                  levels: {
                    3: 2,
                  },
                },
              ],
              [
                {
                  content: "PUT：跟 POST ⽅法很像，也是想服务器提交数据 。但是， 它们之间有不同 。 PUT 指定了资源在服务器上的位置， 而 POST 没有",
                  levels: {
                    3: 3,
                  },
                },
              ],
              [
                {
                  content: "HEAD：只请求页面的首部",
                  levels: {
                    3: 4,
                  },
                },
              ],
              [
                {
                  content: "DELETE：删除服务器上的某资源",
                  levels: {
                    3: 5,
                  },
                },
              ],
              "OPTIONS：它用于获取当前 URL 所⽀持的⽅法 。如果请求成功，会有⼀个 Allow 的头包含类似 “GET,POST” 这样的信息",
              "TRACE：被用于激发⼀个远程的，应用层的请求消息回路",
              "CONNECT：把请求连接转换到透明的 TCP/IP 通道",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 3,
            title: "HTTP的几种请求方法用途",
          },
          {
            id: "01010104",
            status: 1,
            cont_type: 4,
            content: [
              {
                title: "简单版",
                content: [
                  "浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ， 向服务器发起请求；",
                  "服务器交给后台处理完成后返回数据， 浏览器接收⽂件 ( HTML、JS、CSS 、图象等)；",
                  "浏览器对加载到的资源 ( HTML、JS、CSS 等) 进行语法解析， 建立相应的内部数据结构( 如 HTML 的 DOM )；",
                  "载⼊解析到的资源⽂件， 渲染页面， 完成。",
                ],
              },
              {
                title: "详细版",
                content: [
                  "在浏览器地址栏输⼊URL",
                  {
                    title: "浏览器查看缓存， 如果请求资源在缓存中并且新鲜，跳转到转码步骤",
                    content: [
                      "如果资源未缓存，发起新请求",
                      "如果已缓存，检验是否足够新鲜， 足够新鲜直接提供给客户端， 否则与服务器进行验证。",
                      {
                        title: "检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control ：",
                        content: [
                          "HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期",
                          "HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间",
                        ],
                      },
                    ],
                  },
                  "浏览器解析URL获取协议， 主机，端⼝ ， path",
                  "浏览器组装⼀个HTTP ( GET) 请求报文",
                  {
                    title: "浏览器获取主机ip地址， 过程如下：",
                    content: ["浏览器缓存", "本机缓存", "hosts⽂件", "路由器缓存", "ISP DNS缓存", "DNS递归查询 ( 可能存在负载均衡导致每次IP不⼀样)"],
                  },
                  {
                    title: "打开⼀个socket与目标IP地址，端口建立TCP链接，三次握手如下：",
                    content: [
                      "客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端⼝",
                      "服务器发回SYN=1， ACK=X+1， Seq=Y的响应包",
                      "客户端发送ACK=Y+1， Seq=Z",
                    ],
                  },
                  "TCP链接建立后发送HTTP请求",
                  "服务器接受请求并解析，将请求转发到服务程序， 如虚拟主机使用工TTP 工ost头部判断请求的服务程序",
                  "服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜， 返回304等对应状态码",
                  "处理程序读取完整请求并准备工TTP响应， 可能需要查询数据库等操作",
                  "服务器将响应报文通过TCP连接发送回浏览器",
                  {
                    title: "浏览器接收工TTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：",
                    content: [
                      "主动⽅发送Fin=1， Ack=Z， Seq= X报⽂",
                      "被动⽅发送ACK=X+1， Seq=Z报⽂",
                      "被动⽅发送Fin=1， ACK=X， Seq=Y报⽂",
                      "主动⽅发送ACK=Y， Seq=X报⽂",
                    ],
                  },
                  "浏览器检查响应状态吗：是否为1XX， 3XX， 4XX， 5XX， 这些情况处理与2XX不同",
                  "如果资源可缓存， 进行缓存",
                  "对响应进⾏解码 (例如gzip压缩)",
                  "根据资源类型决定如何处理 (假设资源为工TML⽂档)",
                  {
                    title: "解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本， 这些操作没有严格的先后顺序， 以下分别解释构建DOM树：",
                    content: [
                      "Tokenizing：根据工TML规范将字符流解析为标记",
                      "Lexing：词法分析将标记转换为对象并定义属性和规则",
                      "DOM construction：根据工TML标记关系将对象组成DOM树",
                    ],
                  },
                  "解析过程中遇到图片 、样式表 、js⽂件，启动下载",
                  {
                    title: "构建CSSOM树：",
                    content: ["Tokenizing：字符流转换为标记流", "Node：根据标记创建节点", "CSSOM：节点创建CSSOM树"],
                  },
                  {
                    title: "根据DOM树和CSSOM树构建渲染树 :",
                    content: [
                      "从DOM树的根节点遍历所有可见节点，不可⻅节点包括：1) script , meta 这样本身不可⻅的标签 。2)被css隐藏的节点， 如 display: none",
                      "对每⼀个可⻅节点，找到恰当的CSSOM规则并应用",
                      "发布可视节点的内容和计算样式",
                    ],
                  },
                  {
                    title: "js解析如下：",
                    content: [
                      "浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading",
                      "HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执⾏⾏内或外部脚本 。这些脚本会同步执⾏， 并且在脚本下载和执⾏时解析器会暂停 。这样就可以用document.write()把文本插⼊到输⼊流中 。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容",
                      "当解析器遇到设置了async属性的script时， 开始下载脚本并继续解析文档 。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载 。异步脚本禁止使用document.write()， 它们可以访问自⼰script和之前的文档元素",
                      "当文档完成解析，document.readState变成interactive",
                      "所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树， 禁止使用document.write()",
                      "浏览器在Document对象上触发DOMContentLoaded事件",
                      "此时文档完全解析完成， 浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件",
                    ],
                  },
                  "显示页面 ( HTML解析过程中会逐步显示页面)",
                ],
              },
              {
                title: "详简版",
                content: [
                  "从浏览器接收 url 到开启⽹络请求线程 ( 这⼀部分可以展开浏览器的机制以及进程与线程之间的关系)",
                  "开启⽹络线程到发出⼀个完整的 HTTP 请求 ( 这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识)",
                  "从服务器接收到请求到对应后台接收到请求 ( 这⼀部分可能涉及到负载均衡， 安全拦截以及后台内部的处理等等)",
                  "后台和前台的 HTTP 交互 ( 这⼀部分包括 HTTP 头部 、响应码 、报文结构 、 cookie 等知识， 可以提下静态资源的 cookie 优化， 以及编码解码， 如 gzip 压缩等)",
                  "单独拎出来的缓存问题， HTTP 的缓存 ( 这部分包括http缓存头部， ETag ， catch-control 等)",
                  "浏览器接收到 HTTP 数据包后的解析流程 ( 解析 html -词法分析然后解析成 dom 树 、解析 css 生成 css 规则树 、合并成 render 树，然后 layout 、 painting 渲染 、复合图层的合成 、 GPU 绘制 、外链资源的处理 、 loaded 和 DOMContentLoaded 等)",
                  "CSS 的可视化格式模型 ( 元素的渲染规则， 如包含块，控制框， BFC ， IFC 等概念)",
                  "JS 引擎解析过程 ( JS 的解释阶段，预处理阶段，执⾏阶段生成执⾏上下文， VO ，作用域链 、回收机制等等)",
                  "其它 ( 可以拓展不同的知识模块， 如跨域，web安全， hybrid 模式等等内容)",
                ],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 4,
            title: "从浏览器地址栏输入url到显示页面的步骤",
          },
          {
            id: "01010105",
            status: 1,
            cont_type: 1,
            content: [
              {
                title: "content 方面",
                content: [
                  "减少 HTTP 请求：合并文件 、 CSS 精灵 、 inline Image",
                  "减少 DNS 查询： DNS 缓存 、将资源分布到恰当数量的主机名",
                  "减少 DOM 元素数量",
                ],
              },
              {
                title: "Server 方面",
                content: ["使用 CDN", "配置 ETag", "对组件使用 Gzip 压缩"],
              },
              {
                title: "Cookie 方面",
                content: ["减⼩ cookie 大⼩"],
              },
              {
                title: "css 方面",
                content: ["将样式表放到页面顶部", "不使用 CSS 表达式", "使用 <link> 不使用 @import"],
              },
              {
                title: "Javascript 方面",
                content: ["将脚本放到页面底部", "将 javascript 和 css 从外部引⼊", "压缩 javascript 和 css", "删除不需要的脚本", "减少 DOM 访问"],
              },
              {
                title: "图片⽅面",
                content: ["优化图片：根据实际颜色需要选择色深 、压缩", "优化 css 精灵", "不要在 HTML 中拉伸图片"],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 5,
            title: [
              {
                content: "如何进行网站性能优化",
                levels: {
                  1: 5,
                },
              },
            ],
          },
          {
            id: "01010106",
            status: 1,
            cont_type: 0,
            content: [
              {
                title: "1XX ：信息状态码",
                content: [
                  "100 Continue 继续，⼀ 般在发送 post 请求时， 已发送了 http header 之后服务端将返回此信息，表示确认， 之后发送具体参数信息",
                ],
              },
              {
                title: "2XX ：成功状态码",
                content: ["200 OK 正常返回信息", "201 Created 请求成功并且服务器创建了新的资源", "202 Accepted 服务器已接受请求，但尚未处理"],
              },
              {
                title: "3XX ：重定向",
                content: [
                  "301 Moved Permanently 请求的网页已永久移动到新位置。",
                  "302 Found 临时性重定向。",
                  "303 See Other 临时性重定向，且总是使用 GET 请求新的 URI 。",
                  "304 Not Modified 自从上次请求后，请求的网页未修改过。",
                ],
              },
              {
                title: "4XX ：客户端错误",
                content: [
                  "400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。",
                  "401 Unauthorized 请求未授权。",
                  "403 Forbidden 禁止访问。",
                  "404 Not Found 找不到如何与 URI 相匹配的资源。",
                ],
              },
              {
                title: "5XX: 服务器错误",
                content: [
                  "500 Internal Server Error 最常⻅的服务器端错误。",
                  "503 Service Unavailable 服务器端暂时⽆法处理请求 ( 可能是过载或维护) 。",
                ],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 6,
            title: [
              {
                content: "HTTP状态码及其含义",
                levels: {
                  2: 5,
                },
              },
            ],
          },
          {
            id: "01010107",
            status: 1,
            cont_type: 1,
            content: [
              "用正确的标签做正确的事情！",
              "HTML 语义化就是让页面的内容结构化，便于对浏览器 、搜索引擎解析；",
              "在没有样式 CSS 情况下也以⼀种⽂档格式显示， 并且是容易阅读的。",
              "搜索引擎的爬虫依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。",
              "使阅读源代码的⼈对网站更容易将网站分块，便于阅读维护理解",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 7,
            title: [
              {
                content: "语义化的理解",
                levels: {
                  3: 5,
                },
              },
            ],
          },
          {
            id: "01010108",
            status: 1,
            cont_type: 1,
            content: [
              "主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎",
              "渲染引擎：负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加⼊CSS 等)， 以及计算网页的显示⽅式，然后会输出至显示器或打印机 。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同 。所有网页浏览器 、电子邮件客户端以及其它需要编辑 、显示网络内容的应用程序都需要内核",
              "JS 引擎则：解析和执⾏ javascript 来实现网页的动态效果",
              "最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立， 内核就倾向于只指渲染引擎",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 8,
            title: [
              {
                content: "介绍⼀下你对浏览器内核的理解？",
                levels: {
                  4: 5,
                },
              },
            ],
          },
          {
            id: "01010109",
            status: 1,
            cont_type: 1,
            content: [
              {
                title: "HTML5 现在已经不是 SGML 的子集， 主要是关于图像，位置，存储， 多任务等功能的增加",
                content: [
                  "绘画 canvas",
                  "用于媒介回放的 video 和 audio 元素",
                  "本地离线存储 localStorage 长期存储数据， 浏览器关闭后数据不丢失",
                  "sessionStorage 的数据在浏览器关闭后自动删除",
                  "语意化更好的内容元素， 比如 article 、 footer 、 header 、 nav 、 section",
                  "表单控件， calendar 、 date 、 time 、 email 、 url 、 search",
                  "新的技术 webworker 、 websocket 、 Geolocation",
                ],
              },
              {
                title: "移除的元素：",
                content: [
                  "纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、",
                  "对可用性产生负面影响的元素： frame 、 frameset 、 noframes",
                ],
              },
              {
                title: "⽀持 HTML5 新标签：",
                content: [
                  "IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产生的标签",
                  "可以利用这⼀特性让这些浏览器⽀持 HTML5 新标签",
                  "浏览器⽀持新标签后， 还需要添加标签默认的样式",
                ],
              },
              "当然也可以直接使用成熟的框架 、比如 html5shim",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 9,
            title: [
              {
                content: "html5有哪些新特性、移除了那些元素？",
                levels: {
                  5: 5,
                },
              },
            ],
          },
          {
            id: "01010110",
            status: 1,
            cont_type: 1,
            content: [
              "在用户没有与因特网连接时， 可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件",
              "原理： HTML5 的离线存储是基于⼀个新建的 .appcache 文件的缓存机制(不是存储技术)， 通过这个文件上的解析清单离线存储资源， 这些资源就会像 cookie ⼀样被存储了下来 。之后当网络在处于离线状态下时， 浏览器会通过被离线存储的数据进行页面展示",
              {
                title: "如何使用：",
                content: [
                  "页面头部像下面⼀样加入⼀个 manifest 的属性；",
                  "在 cache.manifest 文件的编写离线存储的资源",
                  "在离线状态时， 操作 window.applicationCache 进行需求实现",
                  {
                    title: "",
                    cont_type: 5,
                    content: "\nCACHE MANIFEST\n#v0.11\nCACHE:\njs/app.js\ncss/style.css\nNETWORK:\nresourse/logo.png\nFALLBACK:\n/offline.html",
                  },
                ],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 10,
            title: [
              {
                content: "HTML5 的离线储存怎么使用， 工作原理能不能解释⼀下？",
                levels: {
                  6: 5,
                },
              },
            ],
          },
          {
            id: "01010111",
            status: 1,
            cont_type: 1,
            content: [
              "在线的情况下， 浏览器发现 html 头部有 manifest 属性， 它会请求 manifest 文件， 如果是第⼀次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储 。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件， 如果文件没有发生改变，就不做任何操作， 如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。",
              "离线的情况下， 浏览器就直接使用离线存储的资源。",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 11,
            title: "浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢",
          },
          {
            id: "01010112",
            status: 1,
            cont_type: 1,
            content: [
              "cookie 是⽹站为了标示用户身份而储存在用户本地终端 ( Client Side)上的数据 ( 通常经过加密)",
              "cookie数据始终在同源的http请求中携带 ( 即使不需要)， 记会在浏览器和服务器间来回传递",
              "sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存",
              {
                title: "存储⼤小：",
                content: [
                  "cookie 数据⼤小不能超过4k",
                  "sessionStorage 和 localStorage 虽然也有存储⼤小的限制，但比 cookie ⼤得多， 可以达到5M或更⼤",
                ],
              },
              {
                title: "有效时间：",
                content: [
                  "localStorage 存储持久数据， 浏览器关闭后数据不丢失除⾮主动删除数据",
                  "sessionStorage 数据在当前浏览器窗⼝关闭后自动删除",
                  "cookie 设置的 cookie 过期时间之前⼀直有效， 即使窗⼝或浏览器关闭",
                ],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 12,
            title: "请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？",
          },
          {
            id: "01010113",
            status: 1,
            cont_type: 1,
            content: [
              "iframe 会阻塞主⻚⾯的 Onload 事件",
              "搜索引擎的检索程序无法解读这种⻚⾯，不利于 SEO",
              "iframe 和主⻚⾯共享连接池， 而浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载",
              "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript 动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 13,
            title: "iframe有那些缺点？",
          },
          {
            id: "01010114",
            status: 1,
            cont_type: 3,
            content: ["标签闭合 、标签小写 、不乱嵌套 、使用外链 css 和 js 、结构⾏为表现的分离"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 14,
            title: "WEB标准以及W3C标准是什么?",
          },
          {
            id: "01010115",
            status: 1,
            cont_type: 1,
            content: [
              {
                title: "⼀个是功能上的差别",
                content: ["主要是 XHTML 可兼容各⼤浏览器 、手机以及 PDA ， 并且浏览器也能快速正确地编译⽹⻚"],
              },
              {
                title: "另外是书写习惯的差别",
                content: ["XHTML 元素必须被正确地嵌套， 闭合， 区分大⼩写，文档必须拥有根元素"],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 15,
            title: "xhtml和html有什么区别?",
          },
          {
            id: "01010116",
            status: 1,
            cont_type: 1,
            content: [
              "页面被加载的时， link 会同时被加载， 而 @imort 页面被加载的时， link 会同时被加载， 而 @import 引用的 CSS 会等到页面被加载完再加载 import 只在 IE5 以上才能识别， 而 link 是 XHTML 标签， 无兼容问题 link 方式的样式的权重 高于 @import 的权重",
              "<!DOCTYPE> 声明位于文档中的最前面， 处于 <html> 标签之前 。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档",
              "严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运⾏",
              "在混杂模式中， 页面以宽松的向后兼容的方式显示 。模拟老式浏览器的⾏为以防止站点无法⼯作 。 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 16,
            title: "Doctype作用? 严格模式与混杂模式如何区分？ 它们有何意义?",
          },
          {
            id: "01010117",
            status: 1,
            cont_type: 1,
            content: [
              "⾏内元素有： a b span img input select strong",
              "块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p",
              "空元素： <br> <hr> <img> <input> <link> <meta>",
              "⾏内元素不可以设置宽高，不独占⼀⾏",
              "块级元素可以设置宽高， 独占⼀⾏",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 17,
            title: "行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？",
          },
          {
            id: "01010118",
            status: 1,
            cont_type: 1,
            content: [
              "class :为元素设置类标识",
              "data-* : 为元素增加自定义属性",
              "draggable : 设置元素是否可拖拽",
              "id : 元素 id ，文档内唯⼀",
              "lang : 元素内容的的语⾔",
              "style : ⾏内 css 样式",
              "title : 元素相关的建议信息",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 18,
            title: "HTML全局属性(global attribute)有哪些",
          },
          {
            id: "01010119",
            status: 1,
            cont_type: 1,
            content: [
              "svg 绘制出来的每⼀个图形的元素都是独立的 DOM 节点， 能够方便的绑定事件或用来修改 。 canvas 输出的是⼀整幅画布",
              "svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩⼩，不会失真和锯齿 。而canvas 输出标量画布，就像⼀张图片⼀样，放大会失真或者锯齿",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 19,
            title: "Canvas和SVG有什么区别？",
          },
          {
            id: "01010120",
            status: 1,
            cont_type: 1,
            content: ["HTML5 不基于 SGML ， 因此不需要对 DTD 进⾏引用，但是需要 doctype 来规范浏览器的⾏为", "而 HTML4.01 基于 SGML ,所以需要对类型"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 20,
            title: "HTML5 为什么只需要写 <!DOCTYPE HTML>",
          },
          {
            id: "01010121",
            status: 1,
            cont_type: 1,
            content: ["svg", "border-radius", "纯 js 实现 需要求⼀个点在不在圆上简单算法 、获取鼠标坐标等等"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 21,
            title: "如何在页面上实现⼀个圆形的可点击区域？",
          },
          {
            id: "01010122",
            status: 1,
            cont_type: 1,
            content: [
              "区分用户是计算机还是⼈的公共全自动程序 。可以防止恶意破解密码 、刷票 、论坛灌水",
              "有效防止黑客对某⼀个特定注册用户用特定程序暴⼒破解方式进⾏不断的登陆尝试",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 22,
            title: "网页验证码是干嘛的， 是为了解决什么安全问题",
          },
          {
            id: "01010123",
            status: 1,
            cont_type: 1,
            content: [
              {
                title: "meta 属性",
                cont_type: 5,
                content:
                  '// 此处待完善，待重新编辑\nname="viewport"\ncontent="width=device-width"\ninitial-scale="1.0"\n// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’\n// device-width 设备宽度\n// height 设置viewport高度，⼀ 般设置了宽度，会自动解析出高度，可以不用设置\n// initial-scale 默认缩放比例 (初始缩放比例)， 为⼀个数字，可以带⼩数\n// minimum-scale 允许用户最⼩缩放比例，为⼀个数字，可以带⼩数\n// maximum-scale 允许用户最大缩放比例，为⼀个数字，可以带⼩数\n// user-scalable 是否允许手动缩放',
              },
              {
                title: "延伸提问",
                content: ["怎样处理 移动端 1px 被 渲染成 2px 问题"],
              },
              {
                title: "局部处理",
                content: [
                  "mate 标签中的 viewport 属性 ，initial-scale设置为 1",
                  "rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩⼩⼀倍即可；",
                ],
              },
              {
                title: "全局处理",
                content: ["mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5", "rem 按照设计稿标准走即可"],
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 23,
            title: "viewport",
          },
          {
            id: "01010124",
            status: 1,
            cont_type: 1,
            content: [
              {
                title: "禁止使用 iframe ( 阻塞父⽂档 onload 事件)",
                content: [
                  "iframe 会阻塞主页面的 Onload 事件",
                  "搜索引擎的检索程序⽆法解读这种页面，不利于SEO",
                  "iframe 和主页面共享连接池， 而浏览器对相同域的连接有限制，所以会影响页面的并行加载",
                  "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript",
                  "动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
                ],
              },
              "禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能)",
              "使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流)",
              {
                title: "对于⼀些⼩图标， 可以使用base64位编码， 以减少⽹络请求 。但不建议大图使用， 比较耗费 CPU，⼩图标优势在于",
                content: ["减少 HTTP 请求", "避免⽂件跨域", "修改及时生效"],
              },
              "页面头部的 <style></style> <script></script> 会阻塞页面；( 因为 Renderer进程中 JS 线程和渲染线程是互斥的)",
              "页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)",
              "⽹页 gzip ， CDN 托管， data 缓存 ， 图片服务器",
              "前端模板 1S+数据，减少由于 HTML 标签导致的带宽浪费， 前端用变量保存A1AX请求结果，每次操作本地变量，不用请求，减少请求次数",
              "用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能",
              "当需要设置的样式很多时设置 className 而不是直接操作 style",
              "少用全局变量 、缓存 DOM 节点查找的结果 。减少 IO 读取操作",
              "图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳",
              "对普通的网站有⼀个统⼀的思路，就是尽量向前端优化 、减少数据库操作 、减少磁盘 IO",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 24,
            title: "渲染优化",
          },
          {
            id: "01010125",
            status: 1,
            cont_type: 5,
            content: [
              '<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大⼩写-->\n<head lang="en"> <!--标准的 lang 属性写法-->\n<meta charset= ’utf-8′> <!--声明文档使用的字符编码-->\n<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--优先使\n<meta name= "description" content="不超过150个字符"/> <!--页面描述-->\n<meta name= "keywords" content="/> <!-- 页面关键词-->\n<meta name= "author" content= "name, email@gmail .com"/> <!--网页作者-->\n<meta name= "robots" content= "index,follow"/> <!--搜索引擎抓取-->\n<meta name= "viewport" content="initial-scale=1, maximum- scale=3, minimum-sc\n<meta name= "apple-mobile-web-app-title" content="标题"> <!--iOS 设备 begin-- <meta name= "apple-mobile-web-app-capable" content= "yes"/> <!--添加到主屏后的标是否启用 WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->\n< meta name= "apple- itunes- app" content=" app- id=myAppStoreID, affiliate-data=\n<!--添加智能 App ⼴告条 Smart App Banner ( iOS 6+ Safari) -->\n<meta name= "apple-mobile-web-app-status-bar-style" content= "black"/>\n<meta name= "format-detection" content="telphone=no, email=no"/> <!--设置苹果\n<meta name= "renderer" content= "webkit"> <!-- 启用360浏览器的极速模式(webkit)-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--避免IE使用兼容模\n<meta http-equiv= "Cache-Control" content="no-siteapp" /> <!--不让百度转码- <meta name= "HandheldFriendly" content= "true"> <!--针对手持设备优化，主要是针\n<meta name= "MobileOptimized" content= "320"> <!--微软的老式浏览器-->\n<meta name= "screen-orientation" content= "portrait"> <!--uc强制竖屏-->\n<meta name= "x5-orientation" content= "portrait"> <!--QQ强制竖屏-->\n<meta name= "full-screen" content="yes"> <!--UC强制全屏-->\n<meta name= "x5-fullscreen" content= "true"> <!--QQ强制全屏-->\n<meta name= "browsermode" content= "application"> <!--UC应用模式-->\n<meta name= "x5-page-mode" content="app"> <!-- QQ应用模式-->\n<meta name= "msapplication-tap-highlight" content="no"> <!--windows phone置页面不缓存-->\n<meta http-equiv="pragma" content="no-cache">\n<meta http-equiv= "cache-control" content="no-cache">\n<meta http-equiv= "expires" content="0">',
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 25,
            title: "meta viewport相关",
          },
          {
            id: "01010126",
            status: 1,
            cont_type: 1,
            content: [
              "IE : trident 内核",
              "Firefox ： gecko 内核",
              "14/115",
              "2023/4 第⼀部分：基础篇 | EncodeStudio Safari : webkit 内核",
              "Opera :以前是 presto 内核， Opera 现已改用Google - Chrome 的 Blink 内核",
              "Chrome:Blink (基于 webkit ， Google与Opera Software共同开发)",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 26,
            title: "你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?",
          },
          {
            id: "01010127",
            status: 1,
            cont_type: 1,
            content: [
              "改版的时候更⽅便 只要改 css ⽂件。",
              "页面加载速度更快 、结构化清晰 、页面显示简洁。",
              "表现与结构相分离。",
              "易于优化 ( seo ) 搜索引擎更友好， 排名更容易靠前。",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 27,
            title: "div+css的布局较table布局有什么优点？",
          },
          {
            id: "01010128",
            status: 1,
            cont_type: 1,
            content: [
              "alt(alt text) :为不能显示图像 、窗体或 applets 的用户代理 ( UA )， alt 属性用来指定替换⽂字 。替换⽂字的语⾔由 lang 属性指定 。(在IE浏览器下会在没有 title 时把 alt 当成 tool tip 显示)",
              "title(tool tip) :该属性为设置该属性的元素提供建议性的信息",
              "strong :粗体强调标签， 强调，表示内容的重要性",
              "em :斜体强调标签，更强烈强调，表示内容的强调点",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 28,
            title: "img的alt与title有何异同？b：strong与em的异同？",
          },
          {
            id: "01010129",
            status: 1,
            cont_type: 1,
            content: [
              "渐进增强：针对低版本浏览器进⾏构建页面，保证最基本的功能，然后再针对高级浏览器进⾏效果 、交互等改进和追加功能达到更好的用户体验。",
              "优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。",
              {
                cont_type: 6,
                content:
                  "区别：优雅降级是从复杂的现状开始， 并试图减少用户体验的供给， 而渐进增强则是从⼀个非常基础的， 能够起作用的版本开始， 并不断扩充， 以适应未来环境的需要 。降级 (功能衰减) 意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带",
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 29,
            title: "你能描述⼀下渐进增强和优雅降级之间的不同吗",
          },
          {
            id: "01010130",
            status: 1,
            cont_type: 1,
            content: ["CDN 缓存更⽅便", "突破浏览器并发限制", "节约 cookie 带宽", "节约主域名的连接数，优化页面响应速度", "防止不必要的安全问题"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 30,
            title: "为什么利用多个域名来存储网站资源会更有效？",
          },
          {
            id: "01010131",
            status: 1,
            cont_type: 1,
            content: [
              "src 用于替换当前元素， href用于在当前⽂档和引用资源之间确立联系。",
              "src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到⽂档内，例如 js 脚本，img 图片和 frame 等元素",
              {
                cont_type: 6,
                content:
                  '<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理， 直到将该资源加载 、编译 、执⾏完毕， 图片和框架等元素也如此， 类似于将所指向资源嵌⼊当前标签内 。这也是为什么将js脚本放在底部而不是头部',
              },
              "href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置， 建立和当前元素 ( 锚点) 或当前⽂档 (链接) 之间的链接， 如果我们在⽂档中添加",
              '<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停止对当前⽂档的处理 。这也是为什么建议使用 link ⽅式来加载 css ， 而不是使用 @import ⽅式',
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 31,
            title: "简述⼀下src与href的区别",
          },
          {
            id: "01010132",
            status: 1,
            cont_type: 1,
            content: [
              "png-8 、 png-24 、 jpeg 、 gif 、 svg、Webp、Apng",
              {
                cont_type: 6,
                content: "注意：面试官希望听到是Webp , Apng 。 ( 是否有关注新技术，新鲜事物)",
              },
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 32,
            title: "知道的网页制作会用到的图片格式有哪些？",
          },
          {
            id: "01010133",
            status: 1,
            cont_type: 3,
            content: ["dns 缓存， cdn 缓存， 浏览器缓存， 服务器缓存"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 33,
            title: "在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始， ⼀次js请求⼀般情况下有哪些地方会有缓存处理？",
          },
          {
            id: "01010134",
            status: 1,
            cont_type: 1,
            content: [
              "图片懒加载，在页面上的未可视区域可以添加⼀个滚动事件， 判断图片位置与浏览器顶端的距离与页面的距离， 如果前者小于后者，优先加载。",
              "如果为幻灯片 、相册等， 可以使用图片预加载技术，将当前展示图片的前⼀张和后⼀张优先下载。",
              "如果图片为css图片， 可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。",
              "如果图片过大， 可以使用特殊编码的图片，加载时会先加载⼀张压缩的特别厉害的缩略图， 以提高用户体验。",
              "如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示⼀致。",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 34,
            title: "⼀个页面上有大量的图片 (大型电商网站) ，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。",
          },
          {
            id: "01010135",
            status: 1,
            cont_type: 1,
            content: ["cookie", "session", "url 重写", "隐藏 input", "ip 地址"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 35,
            title: "web开发中会话跟踪的方法有哪些",
          },
          {
            id: "01010136",
            status: 1,
            cont_type: 1,
            content: [
              "attribute 是 dom 元素在文档中作为 html 标签拥有的属性；",
              "property 就是 dom 元素在 js 中作为对象拥有的属性。",
              "对于 html 的标准属性来说， attribute 和 property 是同步的， 是会自动更新的",
              "但是对于自定义的属性来说，他们是不同步的",
            ],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {
              type: ["010101"],
            },
            order: 36,
            title: "attribute和property的区别是什么",
          },
        ],
        title: "杂记单",
        id: "010101",
      },
      {
        label: "备忘录",
        children: [],
        title: "备忘录",
        id: "010102",
        topics: [
          {
            id: "01010201",
            status: 1,
            cont_type: 3,
            content: ["空白内容"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {},
            order: 1,
            title: "空白标题",
          },
        ],
      },
      {
        label: "任务单",
        children: [],
        title: "任务单",
        id: "010103",
        topics: [
          {
            id: "01010301",
            status: 1,
            cont_type: 3,
            content: ["空白内容"],
            create_time: 1751181221993,
            update_time: 1751181221993,
            classify: {},
            order: 1,
            title: "空白标题",
          },
        ],
      },
    ],
    title: "临时纪要",
    id: "0101",
  },
  {
    label: "前端资料",
    children: [
      {
        label: "夯实基础",
        children: [
          {
            label: "HTML",
            topics: [
              {
                id: "0102010101",
                status: 1,
                cont_type: 1,
                content: [
                  "合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容高度概括， ⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可",
                  [
                    "语义化的 HTML 代码，符合W3C规范：语义化代码让",
                    {
                      content: "搜索引擎",
                      explain: "这是对搜索引擎的解释内容",
                    },
                    "容易理解网⻚",
                  ],
                  "重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下， 有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取",
                  "重要内容不要用 js 输出：爬虫不会执⾏js获取内容",
                  [
                    {
                      levels: {
                        1: 5,
                      },
                      content: "少用 iframe ：搜索引擎不会抓取 iframe 中的内容",
                    },
                  ],
                  [
                    {
                      content: "⾮装饰性图片必须加 alt",
                      levels: {
                        3: 5,
                      },
                    },
                  ],
                  [
                    {
                      content: "提高网站速度： 网站速度是搜索引擎排序的⼀个重要指标",
                      levels: {
                        3: 5,
                      },
                    },
                  ],
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 1,
                title: [
                  {
                    content: "前端需要注意哪些SEO优化？",
                    levels: {
                      2: 5,
                      3: 5,
                      4: 5,
                      5: 5,
                      6: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010102",
                status: 1,
                cont_type: 1,
                content: [
                  "通常当鼠标滑动到元素上的时候显示",
                  "alt 是 <img/> 的特有属性， 是图片内容的等价描述，用于图片⽆法加载时显示 、读屏器阅读图片 。可提图片高可访问性， 除了纯装饰图片外都必须设置有意义的值， 搜索引擎会重点分析。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 2,
                title: "<img> 的 title 和 alt 有什么区别",
              },
              {
                id: "0102010103",
                status: 1,
                cont_type: 1,
                content: [
                  [
                    {
                      content: "GET：发送⼀个请求来取得服务器上的某⼀资源",
                      levels: {
                        3: 1,
                      },
                    },
                  ],
                  [
                    {
                      content: "POST：向 URL 指定的资源提交数据或附加新的数据",
                      levels: {
                        3: 2,
                      },
                    },
                  ],
                  [
                    {
                      content: "PUT：跟 POST ⽅法很像，也是想服务器提交数据 。但是， 它们之间有不同 。 PUT 指定了资源在服务器上的位置， 而 POST 没有",
                      levels: {
                        3: 3,
                      },
                    },
                  ],
                  [
                    {
                      content: "HEAD：只请求页面的首部",
                      levels: {
                        3: 4,
                      },
                    },
                  ],
                  [
                    {
                      content: "DELETE：删除服务器上的某资源",
                      levels: {
                        3: 5,
                      },
                    },
                  ],
                  "OPTIONS：它用于获取当前 URL 所⽀持的⽅法 。如果请求成功，会有⼀个 Allow 的头包含类似 “GET,POST” 这样的信息",
                  "TRACE：被用于激发⼀个远程的，应用层的请求消息回路",
                  "CONNECT：把请求连接转换到透明的 TCP/IP 通道",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 3,
                title: "HTTP的几种请求方法用途",
              },
              {
                id: "0102010104",
                status: 1,
                cont_type: 4,
                content: [
                  {
                    title: "简单版",
                    content: [
                      "浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ， 向服务器发起请求；",
                      "服务器交给后台处理完成后返回数据， 浏览器接收⽂件 ( HTML、JS、CSS 、图象等)；",
                      "浏览器对加载到的资源 ( HTML、JS、CSS 等) 进行语法解析， 建立相应的内部数据结构( 如 HTML 的 DOM )；",
                      "载⼊解析到的资源⽂件， 渲染页面， 完成。",
                    ],
                  },
                  {
                    title: "详细版",
                    content: [
                      "在浏览器地址栏输⼊URL",
                      {
                        title: "浏览器查看缓存， 如果请求资源在缓存中并且新鲜，跳转到转码步骤",
                        content: [
                          "如果资源未缓存，发起新请求",
                          "如果已缓存，检验是否足够新鲜， 足够新鲜直接提供给客户端， 否则与服务器进行验证。",
                          {
                            title: "检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control ：",
                            content: [
                              "HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期",
                              "HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间",
                            ],
                          },
                        ],
                      },
                      "浏览器解析URL获取协议， 主机，端⼝ ， path",
                      "浏览器组装⼀个HTTP ( GET) 请求报文",
                      {
                        title: "浏览器获取主机ip地址， 过程如下：",
                        content: [
                          "浏览器缓存",
                          "本机缓存",
                          "hosts⽂件",
                          "路由器缓存",
                          "ISP DNS缓存",
                          "DNS递归查询 ( 可能存在负载均衡导致每次IP不⼀样)",
                        ],
                      },
                      {
                        title: "打开⼀个socket与目标IP地址，端口建立TCP链接，三次握手如下：",
                        content: [
                          "客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端⼝",
                          "服务器发回SYN=1， ACK=X+1， Seq=Y的响应包",
                          "客户端发送ACK=Y+1， Seq=Z",
                        ],
                      },
                      "TCP链接建立后发送HTTP请求",
                      "服务器接受请求并解析，将请求转发到服务程序， 如虚拟主机使用工TTP 工ost头部判断请求的服务程序",
                      "服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜， 返回304等对应状态码",
                      "处理程序读取完整请求并准备工TTP响应， 可能需要查询数据库等操作",
                      "服务器将响应报文通过TCP连接发送回浏览器",
                      {
                        title: "浏览器接收工TTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：",
                        content: [
                          "主动⽅发送Fin=1， Ack=Z， Seq= X报⽂",
                          "被动⽅发送ACK=X+1， Seq=Z报⽂",
                          "被动⽅发送Fin=1， ACK=X， Seq=Y报⽂",
                          "主动⽅发送ACK=Y， Seq=X报⽂",
                        ],
                      },
                      "浏览器检查响应状态吗：是否为1XX， 3XX， 4XX， 5XX， 这些情况处理与2XX不同",
                      "如果资源可缓存， 进行缓存",
                      "对响应进⾏解码 (例如gzip压缩)",
                      "根据资源类型决定如何处理 (假设资源为工TML⽂档)",
                      {
                        title: "解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本， 这些操作没有严格的先后顺序， 以下分别解释构建DOM树：",
                        content: [
                          "Tokenizing：根据工TML规范将字符流解析为标记",
                          "Lexing：词法分析将标记转换为对象并定义属性和规则",
                          "DOM construction：根据工TML标记关系将对象组成DOM树",
                        ],
                      },
                      "解析过程中遇到图片 、样式表 、js⽂件，启动下载",
                      {
                        title: "构建CSSOM树：",
                        content: ["Tokenizing：字符流转换为标记流", "Node：根据标记创建节点", "CSSOM：节点创建CSSOM树"],
                      },
                      {
                        title: "根据DOM树和CSSOM树构建渲染树 :",
                        content: [
                          "从DOM树的根节点遍历所有可见节点，不可⻅节点包括：1) script , meta 这样本身不可⻅的标签 。2)被css隐藏的节点， 如 display: none",
                          "对每⼀个可⻅节点，找到恰当的CSSOM规则并应用",
                          "发布可视节点的内容和计算样式",
                        ],
                      },
                      {
                        title: "js解析如下：",
                        content: [
                          "浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading",
                          "HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执⾏⾏内或外部脚本 。这些脚本会同步执⾏， 并且在脚本下载和执⾏时解析器会暂停 。这样就可以用document.write()把文本插⼊到输⼊流中 。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容",
                          "当解析器遇到设置了async属性的script时， 开始下载脚本并继续解析文档 。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载 。异步脚本禁止使用document.write()， 它们可以访问自⼰script和之前的文档元素",
                          "当文档完成解析，document.readState变成interactive",
                          "所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树， 禁止使用document.write()",
                          "浏览器在Document对象上触发DOMContentLoaded事件",
                          "此时文档完全解析完成， 浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件",
                        ],
                      },
                      "显示页面 ( HTML解析过程中会逐步显示页面)",
                    ],
                  },
                  {
                    title: "详简版",
                    content: [
                      "从浏览器接收 url 到开启⽹络请求线程 ( 这⼀部分可以展开浏览器的机制以及进程与线程之间的关系)",
                      "开启⽹络线程到发出⼀个完整的 HTTP 请求 ( 这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识)",
                      "从服务器接收到请求到对应后台接收到请求 ( 这⼀部分可能涉及到负载均衡， 安全拦截以及后台内部的处理等等)",
                      "后台和前台的 HTTP 交互 ( 这⼀部分包括 HTTP 头部 、响应码 、报文结构 、 cookie 等知识， 可以提下静态资源的 cookie 优化， 以及编码解码， 如 gzip 压缩等)",
                      "单独拎出来的缓存问题， HTTP 的缓存 ( 这部分包括http缓存头部， ETag ， catch-control 等)",
                      "浏览器接收到 HTTP 数据包后的解析流程 ( 解析 html -词法分析然后解析成 dom 树 、解析 css 生成 css 规则树 、合并成 render 树，然后 layout 、 painting 渲染 、复合图层的合成 、 GPU 绘制 、外链资源的处理 、 loaded 和 DOMContentLoaded 等)",
                      "CSS 的可视化格式模型 ( 元素的渲染规则， 如包含块，控制框， BFC ， IFC 等概念)",
                      "JS 引擎解析过程 ( JS 的解释阶段，预处理阶段，执⾏阶段生成执⾏上下文， VO ，作用域链 、回收机制等等)",
                      "其它 ( 可以拓展不同的知识模块， 如跨域，web安全， hybrid 模式等等内容)",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 4,
                title: "从浏览器地址栏输入url到显示页面的步骤",
              },
              {
                id: "0102010105",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "content 方面",
                    content: [
                      "减少 HTTP 请求：合并文件 、 CSS 精灵 、 inline Image",
                      "减少 DNS 查询： DNS 缓存 、将资源分布到恰当数量的主机名",
                      "减少 DOM 元素数量",
                    ],
                  },
                  {
                    title: "Server 方面",
                    content: ["使用 CDN", "配置 ETag", "对组件使用 Gzip 压缩"],
                  },
                  {
                    title: "Cookie 方面",
                    content: ["减⼩ cookie 大⼩"],
                  },
                  {
                    title: "css 方面",
                    content: ["将样式表放到页面顶部", "不使用 CSS 表达式", "使用 <link> 不使用 @import"],
                  },
                  {
                    title: "Javascript 方面",
                    content: ["将脚本放到页面底部", "将 javascript 和 css 从外部引⼊", "压缩 javascript 和 css", "删除不需要的脚本", "减少 DOM 访问"],
                  },
                  {
                    title: "图片⽅面",
                    content: ["优化图片：根据实际颜色需要选择色深 、压缩", "优化 css 精灵", "不要在 HTML 中拉伸图片"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 5,
                title: [
                  {
                    content: "如何进行网站性能优化",
                    levels: {
                      1: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010106",
                status: 1,
                cont_type: 0,
                content: [
                  {
                    title: "1XX ：信息状态码",
                    content: [
                      "100 Continue 继续，⼀ 般在发送 post 请求时， 已发送了 http header 之后服务端将返回此信息，表示确认， 之后发送具体参数信息",
                    ],
                  },
                  {
                    title: "2XX ：成功状态码",
                    content: ["200 OK 正常返回信息", "201 Created 请求成功并且服务器创建了新的资源", "202 Accepted 服务器已接受请求，但尚未处理"],
                  },
                  {
                    title: "3XX ：重定向",
                    content: [
                      "301 Moved Permanently 请求的网页已永久移动到新位置。",
                      "302 Found 临时性重定向。",
                      "303 See Other 临时性重定向，且总是使用 GET 请求新的 URI 。",
                      "304 Not Modified 自从上次请求后，请求的网页未修改过。",
                    ],
                  },
                  {
                    title: "4XX ：客户端错误",
                    content: [
                      "400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。",
                      "401 Unauthorized 请求未授权。",
                      "403 Forbidden 禁止访问。",
                      "404 Not Found 找不到如何与 URI 相匹配的资源。",
                    ],
                  },
                  {
                    title: "5XX: 服务器错误",
                    content: [
                      "500 Internal Server Error 最常⻅的服务器端错误。",
                      "503 Service Unavailable 服务器端暂时⽆法处理请求 ( 可能是过载或维护) 。",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 6,
                title: [
                  {
                    content: "HTTP状态码及其含义",
                    levels: {
                      2: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010107",
                status: 1,
                cont_type: 1,
                content: [
                  "用正确的标签做正确的事情！",
                  "HTML 语义化就是让页面的内容结构化，便于对浏览器 、搜索引擎解析；",
                  "在没有样式 CSS 情况下也以⼀种⽂档格式显示， 并且是容易阅读的。",
                  "搜索引擎的爬虫依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。",
                  "使阅读源代码的⼈对网站更容易将网站分块，便于阅读维护理解",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 7,
                title: [
                  {
                    content: "语义化的理解",
                    levels: {
                      3: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010108",
                status: 1,
                cont_type: 1,
                content: [
                  "主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎",
                  "渲染引擎：负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加⼊CSS 等)， 以及计算网页的显示⽅式，然后会输出至显示器或打印机 。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同 。所有网页浏览器 、电子邮件客户端以及其它需要编辑 、显示网络内容的应用程序都需要内核",
                  "JS 引擎则：解析和执⾏ javascript 来实现网页的动态效果",
                  "最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立， 内核就倾向于只指渲染引擎",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 8,
                title: [
                  {
                    content: "介绍⼀下你对浏览器内核的理解？",
                    levels: {
                      4: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010109",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "HTML5 现在已经不是 SGML 的子集， 主要是关于图像，位置，存储， 多任务等功能的增加",
                    content: [
                      "绘画 canvas",
                      "用于媒介回放的 video 和 audio 元素",
                      "本地离线存储 localStorage 长期存储数据， 浏览器关闭后数据不丢失",
                      "sessionStorage 的数据在浏览器关闭后自动删除",
                      "语意化更好的内容元素， 比如 article 、 footer 、 header 、 nav 、 section",
                      "表单控件， calendar 、 date 、 time 、 email 、 url 、 search",
                      "新的技术 webworker 、 websocket 、 Geolocation",
                    ],
                  },
                  {
                    title: "移除的元素：",
                    content: [
                      "纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、",
                      "对可用性产生负面影响的元素： frame 、 frameset 、 noframes",
                    ],
                  },
                  {
                    title: "⽀持 HTML5 新标签：",
                    content: [
                      "IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产生的标签",
                      "可以利用这⼀特性让这些浏览器⽀持 HTML5 新标签",
                      "浏览器⽀持新标签后， 还需要添加标签默认的样式",
                    ],
                  },
                  "当然也可以直接使用成熟的框架 、比如 html5shim",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 9,
                title: [
                  {
                    content: "html5有哪些新特性、移除了那些元素？",
                    levels: {
                      5: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010110",
                status: 1,
                cont_type: 1,
                content: [
                  "在用户没有与因特网连接时， 可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件",
                  "原理： HTML5 的离线存储是基于⼀个新建的 .appcache 文件的缓存机制(不是存储技术)， 通过这个文件上的解析清单离线存储资源， 这些资源就会像 cookie ⼀样被存储了下来 。之后当网络在处于离线状态下时， 浏览器会通过被离线存储的数据进行页面展示",
                  {
                    title: "如何使用：",
                    content: [
                      "页面头部像下面⼀样加入⼀个 manifest 的属性；",
                      "在 cache.manifest 文件的编写离线存储的资源",
                      "在离线状态时， 操作 window.applicationCache 进行需求实现",
                      {
                        title: "",
                        cont_type: 5,
                        content: "\nCACHE MANIFEST\n#v0.11\nCACHE:\njs/app.js\ncss/style.css\nNETWORK:\nresourse/logo.png\nFALLBACK:\n/offline.html",
                      },
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 10,
                title: [
                  {
                    content: "HTML5 的离线储存怎么使用， 工作原理能不能解释⼀下？",
                    levels: {
                      6: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010111",
                status: 1,
                cont_type: 1,
                content: [
                  "在线的情况下， 浏览器发现 html 头部有 manifest 属性， 它会请求 manifest 文件， 如果是第⼀次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储 。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件， 如果文件没有发生改变，就不做任何操作， 如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。",
                  "离线的情况下， 浏览器就直接使用离线存储的资源。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 11,
                title: "浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢",
              },
              {
                id: "0102010112",
                status: 1,
                cont_type: 1,
                content: [
                  "cookie 是⽹站为了标示用户身份而储存在用户本地终端 ( Client Side)上的数据 ( 通常经过加密)",
                  "cookie数据始终在同源的http请求中携带 ( 即使不需要)， 记会在浏览器和服务器间来回传递",
                  "sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存",
                  {
                    title: "存储⼤小：",
                    content: [
                      "cookie 数据⼤小不能超过4k",
                      "sessionStorage 和 localStorage 虽然也有存储⼤小的限制，但比 cookie ⼤得多， 可以达到5M或更⼤",
                    ],
                  },
                  {
                    title: "有效时间：",
                    content: [
                      "localStorage 存储持久数据， 浏览器关闭后数据不丢失除⾮主动删除数据",
                      "sessionStorage 数据在当前浏览器窗⼝关闭后自动删除",
                      "cookie 设置的 cookie 过期时间之前⼀直有效， 即使窗⼝或浏览器关闭",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 12,
                title: "请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？",
              },
              {
                id: "0102010113",
                status: 1,
                cont_type: 1,
                content: [
                  "iframe 会阻塞主⻚⾯的 Onload 事件",
                  "搜索引擎的检索程序无法解读这种⻚⾯，不利于 SEO",
                  "iframe 和主⻚⾯共享连接池， 而浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载",
                  "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript 动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 13,
                title: "iframe有那些缺点？",
              },
              {
                id: "0102010114",
                status: 1,
                cont_type: 3,
                content: ["标签闭合 、标签小写 、不乱嵌套 、使用外链 css 和 js 、结构⾏为表现的分离"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 14,
                title: "WEB标准以及W3C标准是什么?",
              },
              {
                id: "0102010115",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "⼀个是功能上的差别",
                    content: ["主要是 XHTML 可兼容各⼤浏览器 、手机以及 PDA ， 并且浏览器也能快速正确地编译⽹⻚"],
                  },
                  {
                    title: "另外是书写习惯的差别",
                    content: ["XHTML 元素必须被正确地嵌套， 闭合， 区分大⼩写，文档必须拥有根元素"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 15,
                title: "xhtml和html有什么区别?",
              },
              {
                id: "0102010116",
                status: 1,
                cont_type: 1,
                content: [
                  "页面被加载的时， link 会同时被加载， 而 @imort 页面被加载的时， link 会同时被加载， 而 @import 引用的 CSS 会等到页面被加载完再加载 import 只在 IE5 以上才能识别， 而 link 是 XHTML 标签， 无兼容问题 link 方式的样式的权重 高于 @import 的权重",
                  "<!DOCTYPE> 声明位于文档中的最前面， 处于 <html> 标签之前 。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档",
                  "严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运⾏",
                  "在混杂模式中， 页面以宽松的向后兼容的方式显示 。模拟老式浏览器的⾏为以防止站点无法⼯作 。 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 16,
                title: "Doctype作用? 严格模式与混杂模式如何区分？ 它们有何意义?",
              },
              {
                id: "0102010117",
                status: 1,
                cont_type: 1,
                content: [
                  "⾏内元素有： a b span img input select strong",
                  "块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p",
                  "空元素： <br> <hr> <img> <input> <link> <meta>",
                  "⾏内元素不可以设置宽高，不独占⼀⾏",
                  "块级元素可以设置宽高， 独占⼀⾏",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 17,
                title: "行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？",
              },
              {
                id: "0102010118",
                status: 1,
                cont_type: 1,
                content: [
                  "class :为元素设置类标识",
                  "data-* : 为元素增加自定义属性",
                  "draggable : 设置元素是否可拖拽",
                  "id : 元素 id ，文档内唯⼀",
                  "lang : 元素内容的的语⾔",
                  "style : ⾏内 css 样式",
                  "title : 元素相关的建议信息",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 18,
                title: "HTML全局属性(global attribute)有哪些",
              },
              {
                id: "0102010119",
                status: 1,
                cont_type: 1,
                content: [
                  "svg 绘制出来的每⼀个图形的元素都是独立的 DOM 节点， 能够方便的绑定事件或用来修改 。 canvas 输出的是⼀整幅画布",
                  "svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩⼩，不会失真和锯齿 。而canvas 输出标量画布，就像⼀张图片⼀样，放大会失真或者锯齿",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 19,
                title: "Canvas和SVG有什么区别？",
              },
              {
                id: "0102010120",
                status: 1,
                cont_type: 1,
                content: [
                  "HTML5 不基于 SGML ， 因此不需要对 DTD 进⾏引用，但是需要 doctype 来规范浏览器的⾏为",
                  "而 HTML4.01 基于 SGML ,所以需要对类型",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 20,
                title: "HTML5 为什么只需要写 <!DOCTYPE HTML>",
              },
              {
                id: "0102010121",
                status: 1,
                cont_type: 1,
                content: ["svg", "border-radius", "纯 js 实现 需要求⼀个点在不在圆上简单算法 、获取鼠标坐标等等"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 21,
                title: "如何在页面上实现⼀个圆形的可点击区域？",
              },
              {
                id: "0102010122",
                status: 1,
                cont_type: 1,
                content: [
                  "区分用户是计算机还是⼈的公共全自动程序 。可以防止恶意破解密码 、刷票 、论坛灌水",
                  "有效防止黑客对某⼀个特定注册用户用特定程序暴⼒破解方式进⾏不断的登陆尝试",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 22,
                title: "网页验证码是干嘛的， 是为了解决什么安全问题",
              },
              {
                id: "0102010123",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "meta 属性",
                    cont_type: 5,
                    content:
                      '// 此处待完善，待重新编辑\nname="viewport"\ncontent="width=device-width"\ninitial-scale="1.0"\n// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’\n// device-width 设备宽度\n// height 设置viewport高度，⼀ 般设置了宽度，会自动解析出高度，可以不用设置\n// initial-scale 默认缩放比例 (初始缩放比例)， 为⼀个数字，可以带⼩数\n// minimum-scale 允许用户最⼩缩放比例，为⼀个数字，可以带⼩数\n// maximum-scale 允许用户最大缩放比例，为⼀个数字，可以带⼩数\n// user-scalable 是否允许手动缩放',
                  },
                  {
                    title: "延伸提问",
                    content: ["怎样处理 移动端 1px 被 渲染成 2px 问题"],
                  },
                  {
                    title: "局部处理",
                    content: [
                      "mate 标签中的 viewport 属性 ，initial-scale设置为 1",
                      "rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩⼩⼀倍即可；",
                    ],
                  },
                  {
                    title: "全局处理",
                    content: ["mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5", "rem 按照设计稿标准走即可"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 23,
                title: "viewport",
              },
              {
                id: "0102010124",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "禁止使用 iframe ( 阻塞父⽂档 onload 事件)",
                    content: [
                      "iframe 会阻塞主页面的 Onload 事件",
                      "搜索引擎的检索程序⽆法解读这种页面，不利于SEO",
                      "iframe 和主页面共享连接池， 而浏览器对相同域的连接有限制，所以会影响页面的并行加载",
                      "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript",
                      "动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
                    ],
                  },
                  "禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能)",
                  "使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流)",
                  {
                    title: "对于⼀些⼩图标， 可以使用base64位编码， 以减少⽹络请求 。但不建议大图使用， 比较耗费 CPU，⼩图标优势在于",
                    content: ["减少 HTTP 请求", "避免⽂件跨域", "修改及时生效"],
                  },
                  "页面头部的 <style></style> <script></script> 会阻塞页面；( 因为 Renderer进程中 JS 线程和渲染线程是互斥的)",
                  "页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)",
                  "⽹页 gzip ， CDN 托管， data 缓存 ， 图片服务器",
                  "前端模板 1S+数据，减少由于 HTML 标签导致的带宽浪费， 前端用变量保存A1AX请求结果，每次操作本地变量，不用请求，减少请求次数",
                  "用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能",
                  "当需要设置的样式很多时设置 className 而不是直接操作 style",
                  "少用全局变量 、缓存 DOM 节点查找的结果 。减少 IO 读取操作",
                  "图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳",
                  "对普通的网站有⼀个统⼀的思路，就是尽量向前端优化 、减少数据库操作 、减少磁盘 IO",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 24,
                title: "渲染优化",
              },
              {
                id: "0102010125",
                status: 1,
                cont_type: 5,
                content: [
                  '<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大⼩写-->\n<head lang="en"> <!--标准的 lang 属性写法-->\n<meta charset= ’utf-8′> <!--声明文档使用的字符编码-->\n<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--优先使\n<meta name= "description" content="不超过150个字符"/> <!--页面描述-->\n<meta name= "keywords" content="/> <!-- 页面关键词-->\n<meta name= "author" content= "name, email@gmail .com"/> <!--网页作者-->\n<meta name= "robots" content= "index,follow"/> <!--搜索引擎抓取-->\n<meta name= "viewport" content="initial-scale=1, maximum- scale=3, minimum-sc\n<meta name= "apple-mobile-web-app-title" content="标题"> <!--iOS 设备 begin-- <meta name= "apple-mobile-web-app-capable" content= "yes"/> <!--添加到主屏后的标是否启用 WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->\n< meta name= "apple- itunes- app" content=" app- id=myAppStoreID, affiliate-data=\n<!--添加智能 App ⼴告条 Smart App Banner ( iOS 6+ Safari) -->\n<meta name= "apple-mobile-web-app-status-bar-style" content= "black"/>\n<meta name= "format-detection" content="telphone=no, email=no"/> <!--设置苹果\n<meta name= "renderer" content= "webkit"> <!-- 启用360浏览器的极速模式(webkit)-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--避免IE使用兼容模\n<meta http-equiv= "Cache-Control" content="no-siteapp" /> <!--不让百度转码- <meta name= "HandheldFriendly" content= "true"> <!--针对手持设备优化，主要是针\n<meta name= "MobileOptimized" content= "320"> <!--微软的老式浏览器-->\n<meta name= "screen-orientation" content= "portrait"> <!--uc强制竖屏-->\n<meta name= "x5-orientation" content= "portrait"> <!--QQ强制竖屏-->\n<meta name= "full-screen" content="yes"> <!--UC强制全屏-->\n<meta name= "x5-fullscreen" content= "true"> <!--QQ强制全屏-->\n<meta name= "browsermode" content= "application"> <!--UC应用模式-->\n<meta name= "x5-page-mode" content="app"> <!-- QQ应用模式-->\n<meta name= "msapplication-tap-highlight" content="no"> <!--windows phone置页面不缓存-->\n<meta http-equiv="pragma" content="no-cache">\n<meta http-equiv= "cache-control" content="no-cache">\n<meta http-equiv= "expires" content="0">',
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 25,
                title: "meta viewport相关",
              },
              {
                id: "0102010126",
                status: 1,
                cont_type: 1,
                content: [
                  "IE : trident 内核",
                  "Firefox ： gecko 内核",
                  "14/115",
                  "2023/4 第⼀部分：基础篇 | EncodeStudio Safari : webkit 内核",
                  "Opera :以前是 presto 内核， Opera 现已改用Google - Chrome 的 Blink 内核",
                  "Chrome:Blink (基于 webkit ， Google与Opera Software共同开发)",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 26,
                title: "你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?",
              },
              {
                id: "0102010127",
                status: 1,
                cont_type: 1,
                content: [
                  "改版的时候更⽅便 只要改 css ⽂件。",
                  "页面加载速度更快 、结构化清晰 、页面显示简洁。",
                  "表现与结构相分离。",
                  "易于优化 ( seo ) 搜索引擎更友好， 排名更容易靠前。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 27,
                title: "div+css的布局较table布局有什么优点？",
              },
              {
                id: "0102010128",
                status: 1,
                cont_type: 1,
                content: [
                  "alt(alt text) :为不能显示图像 、窗体或 applets 的用户代理 ( UA )， alt 属性用来指定替换⽂字 。替换⽂字的语⾔由 lang 属性指定 。(在IE浏览器下会在没有 title 时把 alt 当成 tool tip 显示)",
                  "title(tool tip) :该属性为设置该属性的元素提供建议性的信息",
                  "strong :粗体强调标签， 强调，表示内容的重要性",
                  "em :斜体强调标签，更强烈强调，表示内容的强调点",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 28,
                title: "img的alt与title有何异同？b：strong与em的异同？",
              },
              {
                id: "0102010129",
                status: 1,
                cont_type: 1,
                content: [
                  "渐进增强：针对低版本浏览器进⾏构建页面，保证最基本的功能，然后再针对高级浏览器进⾏效果 、交互等改进和追加功能达到更好的用户体验。",
                  "优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。",
                  {
                    cont_type: 6,
                    content:
                      "区别：优雅降级是从复杂的现状开始， 并试图减少用户体验的供给， 而渐进增强则是从⼀个非常基础的， 能够起作用的版本开始， 并不断扩充， 以适应未来环境的需要 。降级 (功能衰减) 意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 29,
                title: "你能描述⼀下渐进增强和优雅降级之间的不同吗",
              },
              {
                id: "0102010130",
                status: 1,
                cont_type: 1,
                content: ["CDN 缓存更⽅便", "突破浏览器并发限制", "节约 cookie 带宽", "节约主域名的连接数，优化页面响应速度", "防止不必要的安全问题"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 30,
                title: "为什么利用多个域名来存储网站资源会更有效？",
              },
              {
                id: "0102010131",
                status: 1,
                cont_type: 1,
                content: [
                  "src 用于替换当前元素， href用于在当前⽂档和引用资源之间确立联系。",
                  "src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到⽂档内，例如 js 脚本，img 图片和 frame 等元素",
                  {
                    cont_type: 6,
                    content:
                      '<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理， 直到将该资源加载 、编译 、执⾏完毕， 图片和框架等元素也如此， 类似于将所指向资源嵌⼊当前标签内 。这也是为什么将js脚本放在底部而不是头部',
                  },
                  "href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置， 建立和当前元素 ( 锚点) 或当前⽂档 (链接) 之间的链接， 如果我们在⽂档中添加",
                  '<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停止对当前⽂档的处理 。这也是为什么建议使用 link ⽅式来加载 css ， 而不是使用 @import ⽅式',
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 31,
                title: "简述⼀下src与href的区别",
              },
              {
                id: "0102010132",
                status: 1,
                cont_type: 1,
                content: [
                  "png-8 、 png-24 、 jpeg 、 gif 、 svg、Webp、Apng",
                  {
                    cont_type: 6,
                    content: "注意：面试官希望听到是Webp , Apng 。 ( 是否有关注新技术，新鲜事物)",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 32,
                title: "知道的网页制作会用到的图片格式有哪些？",
              },
              {
                id: "0102010133",
                status: 1,
                cont_type: 3,
                content: ["dns 缓存， cdn 缓存， 浏览器缓存， 服务器缓存"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 33,
                title: "在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始， ⼀次js请求⼀般情况下有哪些地方会有缓存处理？",
              },
              {
                id: "0102010134",
                status: 1,
                cont_type: 1,
                content: [
                  "图片懒加载，在页面上的未可视区域可以添加⼀个滚动事件， 判断图片位置与浏览器顶端的距离与页面的距离， 如果前者小于后者，优先加载。",
                  "如果为幻灯片 、相册等， 可以使用图片预加载技术，将当前展示图片的前⼀张和后⼀张优先下载。",
                  "如果图片为css图片， 可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。",
                  "如果图片过大， 可以使用特殊编码的图片，加载时会先加载⼀张压缩的特别厉害的缩略图， 以提高用户体验。",
                  "如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示⼀致。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 34,
                title: "⼀个页面上有大量的图片 (大型电商网站) ，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。",
              },
              {
                id: "0102010135",
                status: 1,
                cont_type: 1,
                content: ["cookie", "session", "url 重写", "隐藏 input", "ip 地址"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 35,
                title: "web开发中会话跟踪的方法有哪些",
              },
              {
                id: "0102010136",
                status: 1,
                cont_type: 1,
                content: [
                  "attribute 是 dom 元素在文档中作为 html 标签拥有的属性；",
                  "property 就是 dom 元素在 js 中作为对象拥有的属性。",
                  "对于 html 的标准属性来说， attribute 和 property 是同步的， 是会自动更新的",
                  "但是对于自定义的属性来说，他们是不同步的",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020101"],
                },
                order: 36,
                title: "attribute和property的区别是什么",
              },
            ],
            title: "HTML",
            id: "01020101",
          },
          {
            label: "CSS",
            topics: [
              {
                id: "0102010201",
                status: 1,
                cont_type: 3,
                content: [
                  "概念：将多个小图片拼接到⼀个图片中 。通过 background-position 和元素尺寸调节需要显示的背景图案。",
                  {
                    title: "优点：",
                    content: [
                      "减少 HTTP 请求数，极大地提高页面加载速度",
                      "增加图片信息重复度，提高压缩比，减少图片大小",
                      "更换⻛格⽅便， 只需在⼀张或⼏张图片上修改颜色或样式即可实现",
                    ],
                  },
                  {
                    title: "缺点：",
                    content: ["图片合并麻烦", "维护麻烦，修改⼀个图片可能需要从新布局整个图片，样式"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 1,
                title: "css sprite是什么,有什么优缺点",
              },
              {
                id: "0102010202",
                status: 1,
                cont_type: 3,
                content: [
                  "联系：它们都能让元素不可⻅",
                  {
                    title: "区别：",
                    content: [
                      "display:none ;会让元素完全从渲染树中消失， 渲染的时候不占据任何空间；visibility: hidden ;不会让元素从渲染树消失， 渲染师元素继续占据空间， 只是内容不可⻅",
                      "display: none ;是⾮继承属性， ⼦孙节点消失由于元素从渲染树消失造成， 通过修改⼦孙节点属性⽆法显示 ；visibility: hidden; 是继承属性， ⼦孙节点消失由于继承了 hidden ， 通过设置 visibility: visible; 可以让⼦孙节点显式",
                      "修改常规流中元素的 display 通常会造成⽂档重排 。修改 visibility 属性只会造成本元素的重绘。",
                      "读屏器不会读取 display: none ;元素内容；会读取 visibility: hidden; 元素内容",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 2,
                title: "display: none; 与 visibility: hidden; 的区别",
              },
              {
                id: "0102010203",
                status: 1,
                cont_type: 1,
                content: [
                  "link 是 HTML ⽅式， @import 是CSS⽅式",
                  "link 最大限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载， 出现 FOUC (⽂档样式短暂失效)",
                  'link 可以通过 rel="alternate stylesheet" 指定候选样式',
                  "浏览器对 link ⽀持早于 @import ， 可以使用 @import 对老浏览器隐藏样式",
                  "@import 必须在样式规则之前， 可以在css⽂件中引用其他⽂件",
                  "总体来说： link 优于 @import",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 3,
                title: "link 与 @import 的区别",
              },
              {
                id: "0102010204",
                status: 1,
                cont_type: 1,
                content: [
                  "Flash Of Unstyled Content ：用户定义样式表加载之前浏览器使用默认样式显示⽂档，用户样式加载渲染之后再从新显示⽂档， 造成⻚⾯闪烁。",
                  "解决方法：把样式表放到⽂档的 <head>",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 4,
                title: "什么是FOUC?如何避免",
              },
              {
                id: "0102010205",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    title: "创建规则：",
                    content: [
                      "根元素",
                      "浮动元素 ( float 不取值为 none )",
                      "绝对定位元素 ( position 取值为 absolute 或 fixed )",
                      "display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、",
                      "inline-flex 之⼀的元素",
                      "overflow 不取值为 visible 的元素",
                    ],
                  },
                  {
                    title: "作用：",
                    content: ["可以包含浮动元素", "不被浮动元素覆盖", "阻止父子元素的 margin 折叠"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 5,
                title: "如何创建块级格式化上下文(block formatting context),BFC有什么用",
              },
              {
                id: "0102010206",
                status: 1,
                cont_type: 1,
                content: [
                  "如果 display 取值为 none ，那么 position 和 float 都不起作用， 这种情况下元素不产生框",
                  "否则， 如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计算值为 none ， display 根据下面的表格进行调整。",
                  "否则， 如果 float 不是 none ，框是浮动的， display 根据下表进行调整",
                  "否则， 如果元素是根元素， display 根据下表进行调整",
                  "其他情况下 display 的值为指定值",
                  {
                    cont_type: 6,
                    content: "总结起来：绝对定位、浮动、根元素都需要调整 display",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 6,
                title: "display 、float 、position的关系",
              },
              {
                id: "0102010207",
                status: 1,
                cont_type: 1,
                content: [
                  "父级 div 定义 height",
                  "结尾处加空 div 标签 clear:both",
                  "父级 div 定义伪类 :after 和 zoom",
                  "父级 div 定义 overflow:hidden",
                  "父级 div 也浮动， 需要定义宽度",
                  "结尾处加 br 标签 clear:both",
                  {
                    cont_type: 6,
                    content: "比较好的是第3种方式， 好多网站都这么用",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 7,
                title: "清除浮动的几种方式，各自的优缺点",
              },
              {
                id: "0102010208",
                status: 1,
                cont_type: 1,
                content: [
                  "因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的， 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。",
                  "当然，初始化样式会对 SEO 有⼀定的影响，但鱼和熊掌不可兼得，但⼒求影响最⼩的情况下初始化",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 8,
                title: "为什么要初始化CSS样式?",
              },
              {
                id: "0102010209",
                status: 1,
                cont_type: 1,
                content: [
                  "新增各种 css 选择器",
                  "圆角 border-radius",
                  "多列布局",
                  "阴影和反射",
                  "文字特效 text-shadow",
                  "线性渐变",
                  "旋转 transform",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 9,
                title: "css3有哪些新特性",
              },
              {
                id: "0102010210",
                status: 1,
                cont_type: 1,
                content: [
                  "p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。",
                  "p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。",
                  "p:only-of-type 选择属于其父元素唯⼀的 <p> 元素的每个 <p> 元素。",
                  "p:only-child 选择属于其父元素的唯⼀⼦元素的每个 <p> 元素。",
                  "p:nth-child(2) 选择属于其父元素的第⼆个⼦元素的每个 <p> 元素。",
                  ":after 在元素之前添加内容,也可以用来做清除浮动。",
                  ":before 在元素之后添加内容。",
                  ":enabled 已启用的表单元素。",
                  ":disabled 已禁用的表单元素。",
                  ":checked 单选框或复选框被选中。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 10,
                title: "CSS3新增伪类有那些？",
              },
              {
                id: "0102010211",
                status: 1,
                cont_type: 1,
                content: [
                  "block 转换成块状元素。",
                  "inline 转换成行内元素。",
                  "none 设置元素不可见。",
                  "inline-block 象行内元素⼀样显示，但其内容象块类型元素⼀样显示。",
                  "list-item 象块类型元素⼀样显示， 并添加样式列表标记。",
                  "table 此元素会作为块级表格来显示",
                  "inherit 规定应该从父元素继承 display 属性的值",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 11,
                title: "display有哪些值？说明他们的作用",
              },
              {
                id: "0102010212",
                status: 1,
                cont_type: 1,
                content: [
                  "有两种， IE 盒子模型 、 W3C 盒子模型；",
                  "盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；",
                  "区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 12,
                title: "介绍⼀下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？",
              },
              {
                id: "0102010213",
                status: 1,
                cont_type: 1,
                content: [
                  "优先级就近原则， 同权重情况下样式定义最近者为准",
                  "载⼊样式以最后载⼊的定位为准",
                  "优先级为: !important > id > class > tag ; !important 比 内联优先级高",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 13,
                title: "CSS优先级算法如何计算？",
              },
              {
                id: "0102010214",
                status: 1,
                cont_type: 3,
                content: ["它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 14,
                title: "对BFC规范的理解？",
              },
              {
                id: "0102010215",
                status: 1,
                cont_type: 3,
                content: [
                  "浮动的框可以向左或向右移动， 直到他的外边缘碰到包含框或另⼀个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在⼀样 。浮动的块框会漂浮在文档普通流的块框上",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 15,
                title: "谈谈浮动和清除浮动",
              },
              {
                id: "0102010216",
                status: 1,
                cont_type: 1,
                content: [
                  "absolute ：生成绝对定位的元素，相对于 static 定位以外的第⼀个父元素进行定位",
                  "fixed ：生成绝对定位的元素，相对于浏览器窗⼝进行定位",
                  "relative ：生成相对定位的元素，相对于其正常位置进行定位",
                  "static 默认值 。没有定位，元素出现在正常的流中",
                  "inherit 规定从父元素继承 position 属性的值",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 16,
                title: "position的值， relative和absolute定位原点是",
              },
              {
                id: "0102010217",
                status: 1,
                cont_type: 1,
                content: ["移除空格", "设置margin 负值", "设置font-size:0", "letter-spacing", "word-spacing"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 17,
                title: "display:inline-block 什么时候不会显示间隙？ (携程)",
              },
              {
                id: "0102010218",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    title: "GIF",
                    content: ["8 位像素， 256 色", "无损压缩", "支持简单动画", "支持 boolean 透明", "适合简单动画"],
                  },
                  {
                    title: "JPEG",
                    content: ["颜色限于 256", "有损压缩", "可控制压缩质量", "不支持透明", "适合照片"],
                  },
                  {
                    title: "PNG",
                    content: [
                      "有 PNG8 和 truecolor PNG",
                      "PNG8 类似 GIF 颜色上限为 256 ，文件小， 支持 alpha 透明度， 无动画",
                      "适合图标 、背景 、按钮",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 18,
                title: "PNG、GIF、JPG的区别及如何选",
              },
              {
                id: "0102010219",
                status: 1,
                cont_type: 3,
                content: [
                  "行内元素设置成浮动之后变得更加像是 inline-block (行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性， 最明显的不同是它的默认宽度不是 100% )， 这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 19,
                title: "行内元素float:left后是否变为块级元素？",
              },
              {
                id: "0102010220",
                status: 1,
                cont_type: 3,
                content: ["偶数字号相对更容易和 web 设计的其他部分构成比例关系"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 20,
                title: "在网页中的应该使用奇数还是偶数的字体？为什么呢？",
              },
              {
                id: "0102010221",
                status: 1,
                cont_type: 1,
                content: ["单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素", "用于区分伪类和伪元素"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 21,
                title: "::before 和 :after中双冒号和单冒号 有什么区别？解释⼀下这2个伪元素的作用",
              },
              {
                id: "0102010222",
                status: 1,
                cont_type: 3,
                content: ["多数显示器默认频率是 60Hz ， 即 1 秒刷新 60 次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 21,
                title: "如果需要手动写动画，你认为最小时间间隔是多久， 为什么？ ( 阿里)",
              },
              {
                id: "0102010223",
                status: 1,
                cont_type: 3,
                content: ["避免使用 @import 引⼊多个 css 文件， 可以使用 CSS 工具将 CSS 合并为⼀个 CSS 文件，例如使用 SassCompass 等"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 22,
                title: "CSS合并方法",
              },
              {
                id: "0102010224",
                status: 1,
                cont_type: 1,
                content: [
                  "！ important 规则最重要，大于其它规则",
                  "行内样式规则，加 1000",
                  "对于选择器中给定的各个 ID 属性值，加 100",
                  "对于选择器中给定的各个类属性 、属性选择器或者伪类选择器，加 10",
                  "对于选择其中给定的各个元素标签选择器，加1",
                  "如果权值⼀样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 23,
                title: "CSS不同选择器的权重(CSS层叠的规则)",
              },
              {
                id: "0102010225",
                status: 1,
                cont_type: 3,
                content: ["position 、 display 、 float 、 width 、 heighttop 、 left 、 right 、"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 24,
                title: "列出你所知道可以改变页面布局的属性",
              },
              {
                id: "0102010226",
                status: 1,
                cont_type: 1,
                content: ["css 压缩与合并 、 Gzip 压缩", "css 文件放在 head 里 、不要用 @import", "尽量用缩写 、避免用滤镜 、合理使用选择器"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 25,
                title: "CSS在性能优化方面的实践",
              },
              {
                id: "0102010227",
                status: 1,
                cont_type: 1,
                content: [
                  "依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation",
                  "transition ：定义了元素在变化过程中是怎么样的， 包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。",
                  "transform ：定义元素的变化结果， 包含 rotate 、 scale 、 skew 、 translate 。",
                  "animation ：动画定义了动作的每⼀帧 ( @keyframes ) 有什么效果， 包括 animation-name ， animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 26,
                title: "CSS3动画 ( 简单动画的实现， 如旋转等)",
              },
              {
                id: "0102010228",
                status: 1,
                cont_type: 1,
                content: ["优点可以加密，减少了 HTTTP 请求", "缺点是需要消耗 CPU 进行编解码"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 27,
                title: "base64的原理及优缺点",
              },
              {
                id: "0102010229",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "流体布局",
                    cont_type: 5,
                    content:
                      '.left {\n  float: left;\n  width: 100px;\n  height: 200px;\n  background: red;\n}\n.right {\n  float: right;\n  width: 200px;\n  height: 200px;\n  background: blue;\n}\n.main {\n  margin-left: 120px;\n  margin-right: 220px;\n  height: 200px;\n  background: green;\n}\n< div class= "container" >\n  <div class="left"></div>\n  <div class="right"></div>\n  <div class="main"></div>\n</div>',
                  },
                  {
                    title: "圣杯布局",
                    cont_type: 5,
                    content:
                      '.container {\n  margin-left: 120px;\n  margin-right: 220px;\n}\n.main {\n  float: left;\n  width: 100%;\n  height:300px;\n  background: green;\n}\n.left {\n  position: relative;\n  left: -120px;\n  float: left;\n  height: 300px;\n  width: 100px;\n  margin-left: -100%;\n  background: red;\n}\n.right {\n  position: relative;\n  right: -220px;\n  float: right;\n  height: 300px;\n  width: 200px;\n  margin-left: -200px;\n  background: blue;\n}\n<div class="container">\n  <div class="main"></div>\n  <div class="left"></div>\n  <div class="right"></div>\n</div>',
                  },
                  {
                    title: "双飞翼布局",
                    cont_type: 5,
                    content:
                      '.content {\n  float: left;\n  width: 100%;\n}\n.main {\n  height: 200px;\n  margin-left: 110px;\n  margin-right: 220px;\n  background: green;\n}\n.main::after {\n  content: \'\';\n  display: block;\n  font-size:0;\n  height: 0;\n  zoom: 1;\n  clear: both;\n}\n.left {\n  float:left;\n  height: 200px;\n  width: 100px;\n  margin-left: -100%;\n  background: red;\n}\n.right {\n  float: right;\n  height: 200px;\n  width: 200px;\n  margin-left: -200px;\n  background: blue;\n}\n<div class="content">\n  <div class="main"></div>\n</div>\n<div class="left"></div>\n<div class="right"></div>',
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 28,
                title: "几种常见的CSS布局",
              },
              {
                id: "0102010230",
                status: 1,
                cont_type: 1,
                content: [
                  "均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性",
                  "Scss 和 LESS 语法较为严谨， LESS 要求⼀定要使用大括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系",
                  "Scss 无全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作用域概念",
                  "Sass 是基于 Ruby 语⾔的， 而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 29,
                title: "stylus/sass/less区别",
              },
              {
                id: "0102010231",
                status: 1,
                cont_type: 1,
                content: [
                  "可以直观的理解为：它就是⼀个平台 。为什么说它是⼀个平台呢？ 因为我们直接用它， 感觉不能⼲什么事情，但是如果让⼀些插件在它上面跑，那么将会很强大",
                  "PostCSS 提供了⼀个解析器， 它能够将 CSS 解析成抽象语法树",
                  "通过在 PostCSS 这个平台上， 我们能够开发⼀些插件，来处理我们的 CSS ， 比如热门的： autoprefixer",
                  "postcss 可以对sass处理过后的 css 再处理 最常⻅的就是 autoprefixer",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 30,
                title: "postcss的作用",
              },
              {
                id: "0102010232",
                status: 1,
                cont_type: 1,
                content: ["<label> 属性 for 和 id", "隐藏原生的 <input>", ":checked + <label>"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 30,
                title: "如何美化CheckBox",
              },
              {
                id: "0102010233",
                status: 1,
                cont_type: 1,
                content: ["伪类表状态", "伪元素是真的有元素", "前者单冒号，后者双冒号"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 31,
                title: "伪类和伪元素的区别",
              },
              {
                id: "0102010234",
                status: 1,
                cont_type: 1,
                content: ["用于减少 HTTP 请求", "适用于小图片", "base64 的体积约为原图的 4/3"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 32,
                title: "base64 的使用",
              },
              {
                id: "0102010235",
                status: 1,
                cont_type: 1,
                content: ["左侧浮动或者绝对定位，然后右侧 margin 撑开", "使用 <div> 包含，然后靠负 margin 形成 bfc", "使用 flex"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 33,
                title: "自适应布局思路",
              },
              {
                id: "0102010236",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    cont_type: 5,
                    content:
                      '.ani{\nwidth:480px;\nheight:320px;\nmargin:50px auto;\noverflow: hidden;\nbox-shadow:0 0 5px rgba(0,0,0,1);\nbackground-size: cover;\nbackground-position: center;\n-webkit-animation-name: "loops";\n-webkit-animation-duration: 20s;\n-webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes "loops" {\n  0% {\n    background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6\n  }\n  25% {\n    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1\n  }\n  50% {\n    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937da\n  }\n  75% {\n    background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d375\n  }\n  100% {\n    background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb23\n  }\n}',
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 34,
                title: "请用CSS写⼀个简单的幻灯片效果页面",
              },
              {
                id: "0102010237",
                status: 1,
                cont_type: 3,
                content: [
                  "外边距重叠就是margin-collapse",
                  "在CSS当中，相邻的两个盒子 ( 可能是兄弟关系也可能是祖先关系) 的外边距可以结合成⼀个单独的外边距 。这种合并外边距的方式被称为折叠， 并且因而所结合成的外边距称为折叠外边距。",
                  {
                    title: "折叠结果遵循下列计算规则：",
                    content: [
                      "两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。",
                      "两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。",
                      "两个外边距⼀正⼀负时，折叠结果是两者的相加的和。",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 35,
                title: "什么是外边距重叠？重叠的结果是什么？",
              },
              {
                id: "0102010238",
                status: 1,
                cont_type: 1,
                content: [
                  "rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素， 以及元素内的所有内容的透明度，",
                  "而 rgba() 只作用于元素的颜色或其背景色 。 ( 设置 rgba 透明的元素的子元素不会继承透明效果！)",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 36,
                title: "rgba()和opacity的透明效果有什么不同？",
              },
              {
                id: "0102010239",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "方法⼀： 已知元素的高宽",
                    cont_type: 5,
                    content:
                      "#div1{\n  background-color:#6699FF;\n  width:200px;\n  height:200px;\n  position: absolute; //父元素需要相对定位\n  top: 50%;\n  left: 50%;\n  margin-top:-100px ; //二分之⼀的height，width\n  margin-left: -100px;\n}",
                  },
                  {
                    title: "方法二",
                    cont_type: 5,
                    content:
                      "#div1{\n  width: 200px;\n  height: 200px;\n  background-color: #6699FF;\n  margin:auto;\n  position: absolute; //父元素需要相对定位\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n}",
                  },
                  {
                    title: "如何垂直居中⼀个 <img> ? (用更简便的方法。)",
                    cont_type: 5,
                    content: "/**<img>的容器设置如下**/\n#container {\n  display:table-cell;\n  text-align:center;\n  vertical-align:middle;\n}",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 37,
                title: "如何垂直居中⼀个浮动元素？",
              },
              {
                id: "0102010240",
                status: 1,
                cont_type: 1,
                content: [
                  "px 和 em 都是长度单位， 区别是， px 的值是固定的，指定是多少就是多少，计算比较容易 。 em 得值不是固定的， 并且 em 会继承父级元素的字体大⼩ 。",
                  "浏览器的默认字体高都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么12px=0.75em , 10px=0.625em 。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 38,
                title: "px和em的区别",
              },
              {
                id: "0102010241",
                status: 1,
                cont_type: 3,
                content: [
                  "他们是 CSS 预处理器 。他是 CSS 上的⼀种抽象层 。他们是⼀种特殊的语法/语⾔编译成CSS 。",
                  "例如Less是⼀种动态样式语⾔ . 将CSS赋予了动态语⾔的特性， 如变量， 继承， 运算， 函数. LESS 既可以在客户端上运⾏ (支持 IE 6+ , Webkit , Firefox )，也可⼀在服务端运⾏ (借助 Node.js )",
                  {
                    title: "为什么要使用它们？",
                    content: [
                      "结构清晰，便于扩展。",
                      "可以方便地屏蔽浏览器私有语法差异 。这个不用多说， 封装对- 浏览器语法差异的重复处理，减少无意义的机械劳动。",
                      "可以轻松实现多重继承。",
                      "完全兼容 CSS 代码， 可以方便地应用到老项目中 。LESS 只- 是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码⼀同编译",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 39,
                title: "Sass 、LESS是什么？大家为什么要使用他们？",
              },
              {
                id: "0102010242",
                status: 1,
                cont_type: 1,
                content: [
                  "硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，",
                  "⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ， 为了避免2D动画在 开始和结束的时候的 repaint 操作，⼀ 般使用 tranform:translateZ(0)",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 40,
                title: "如何使用CSS实现硬件加速？",
              },
              {
                id: "0102010243",
                status: 1,
                cont_type: 1,
                content: [
                  "DOM的变化影响到了元素的⼏何属性 ( 宽高) ,浏览器重新计算元素的⼏何属性， 其他元素的⼏何",
                  "属性和位置也会受到影响， 浏览器需要重新构造渲染树， 这个过程称为重排， 浏览器将受到影响的部分",
                  {
                    title: "重新绘制到屏幕上的过程称为重绘 。引起重排的原因有",
                    content: [
                      "添加或者删除可见的DOM元素，",
                      "元素位置 、尺⼨ 、内容改变，",
                      "浏览器页面初始化，",
                      "浏览器窗⼝尺⼨改变， 重排⼀定重绘， 重绘不⼀定重排，",
                    ],
                  },
                  {
                    title: "减少重绘和重排的方法：",
                    content: [
                      "不在布局信息改变时做 DOM 查询",
                      "使用 cssText 或者 className ⼀次性改变属性",
                      "使用 fragment",
                      "对于多次重排的元素， 如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 51,
                title: "重绘和回流 ( 重排) 是什么， 如何避免？",
              },
              {
                id: "0102010244",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    cont_type: 5,
                    content:
                      "/** 1 **/\n.wraper {\n  position: relative;\n  .box {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100px;\n    height: 100px;\n    margin: -50px 0 0 -50px;\n  }\n}\n/** 2 **/\n.wraper {\n  position: relative;\n  .box {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n}\n/** 3 **/\n.wraper {\n  .box {\n    display: flex;\n    justify-content:center;\n    align-items: center;\n    height: 100px;\n  }\n}\n/** 4 **/\n.wraper {\n  display: table;\n  .box {\n    display: table-cell;\n    vertical-align: middle;\n  }\n}",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 52,
                title: "实现已知或者未知宽度的垂直水平居中",
              },
              {
                id: "0102010245",
                status: 1,
                cont_type: 3,
                content: ["transform: scale(0.7);"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 53,
                title: "如何实现小于12px的字体效果",
              },
              {
                id: "0102010246",
                status: 1,
                cont_type: 3,
                content: ["块级格式化上下文， 是⼀个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020102"],
                },
                order: 54,
                title: "BFC",
              },
            ],
            title: "CSS",
            id: "01020102",
          },
          {
            label: "JavaScript",
            topics: [
              {
                id: "0102010301",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "认识",
                    content: [
                      [
                        {
                          content: "闭包",
                          levels: {
                            2: 5,
                          },
                        },
                        "就是能够读取其他函数",
                        {
                          content: "内部变量",
                          levels: {
                            3: 1,
                          },
                        },
                        "的",
                        {
                          content: "函数",
                          levels: {
                            5: 5,
                          },
                        },
                      ],
                      [
                        {
                          content: "闭包",
                          levels: {
                            1: 5,
                          },
                        },
                        "就是能够",
                        {
                          content: "读取",
                          levels: {
                            1: 5,
                            3: 2,
                          },
                        },
                        "其他函数",
                        {
                          content: "内部变量",
                          levels: {
                            2: 5,
                            3: 1,
                            5: 4,
                            6: 5,
                          },
                        },
                        "的",
                        {
                          content: "函数",
                          levels: {
                            1: 5,
                            2: 5,
                            3: 5,
                            4: 5,
                            5: 5,
                            6: 5,
                          },
                        },
                      ],
                      [
                        {
                          content: "闭包",
                          explain: "这是对闭包的解释内容",
                        },
                        "是指有权访问另⼀个函数作用域中变量的函数，创建闭包的最常⻅的方式就是在⼀个函数内创建另⼀个函数， 通过另⼀个函数访问这个函数的局部变量,利用闭包可以突破作用链域",
                      ],
                      {
                        title: "闭包的特性：",
                        content: ["函数内再嵌套函数", "内部函数可以引用外层的参数和变量", "参数和变量不会被垃圾回收机制回收"],
                      },
                    ],
                  },
                  {
                    title: "理解",
                    content: [
                      "使用闭包主要是为了设计私有的方法和变量 。闭包的优点是可以避免全局变量的污染， 缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露 。在js中， 函数即闭包， 只有函数才会产生作用域的概念",
                      "闭包 的最大用处有两个，⼀个是可以读取函数内部的变量， 另⼀个就是让这些变量始终保持在内存中",
                      "闭包的另⼀个用处， 是封装对象的私有属性和私有方法",
                      "好处：能够实现封装和缓存等；",
                      "坏处：就是消耗内存 、不正当使用会造成内存溢出的问题",
                    ],
                  },
                  {
                    title: "注意事项",
                    content: [
                      "由于闭包会使得函数中的变量都被保存在内存中， 内存消耗很大，所以不能滥用闭包， 否则会造成网页的性能问题，在IE中可能导致内存泄露",
                      "解决方法是，在退出函数之前，将不使用的局部变量全部删除",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1,
                title: [
                  "谈谈你对闭包的",
                  {
                    content: "认识",
                    levels: {
                      6: 5,
                    },
                  },
                  "、",
                  {
                    content: "理解",
                    levels: {
                      2: 5,
                    },
                  },
                  "、",
                  {
                    content: "注意事项",
                    levels: {
                      1: 5,
                      3: 5,
                    },
                  },
                ],
              },
              {
                id: "0102010302",
                status: 1,
                cont_type: 1,
                content: [
                  "作用域链的作用是保证执⾏环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问， 变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的",
                  "简单的说，作用域就是变量与函数的可访问范围， 即作用域控制着变量与函数的可⻅性和生命周期",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2,
                title: "说说你对作用域链的理解",
              },
              {
                id: "0102010303",
                status: 1,
                cont_type: 1,
                content: [
                  "每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)， 当我们访问⼀个对象的属性时",
                  "如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性， 这个prototype ⼜会有自⼰的 prototype ， 于是就这样⼀直找下去，也就是我们平时所说的原型链的概念",
                  "关系： instance.constructor.prototype = instance.__proto__ ",
                  "特点：JavaScript 对象是通过引用来传递的， 我们创建的每个新对象实体中并没有⼀份属于自⼰的原型副本 。当我们修改原型时，与之相关的对象也会继承这⼀改变",
                  "当我们需要⼀个属性的时，有的就会查找他的 Prototype建对象",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 3,
                title: "JavaScript原型，原型链 ? 有什么特点？",
              },
              {
                id: "0102010304",
                status: 1,
                cont_type: 1,
                content: [
                  "事件代理 ( Event Delegation )， ⼜称之为事件委托 。是 JavaScript 中常用绑定事件的常用技巧 。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务 。事件代理的原理是DOM元素的事件冒泡 。使用事件代理的好处是可以提高性能",
                  "可以大量节省内存占用，减少事件注册， 比如在 table 上代理所有 td 的 click 事件就非常棒",
                  "可以实现当新增子对象时无需再次对其绑定",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 4,
                title: "请解释什么是事件代理",
              },
              {
                id: "0102010305",
                status: 1,
                cont_type: 1,
                content: [
                  "构造继承",
                  "原型继承",
                  "实例继承",
                  "拷贝继承",
                  {
                    cont_type: 5,
                    content: [
                      "// 原型 prototype 机制或 apply 和 call 方法去实现较简单， 建议使用构造函数与原型混合方式",
                      "function Parent(){",
                      "  this.name = 'wang';",
                      "}",
                      "function Child(){",
                      "  this.age = 28;",
                      "}",
                      "Child.prototype = new Parent(); //继承了Parent，通过原型",
                      {
                        content: "var demo = new Child();",
                        levels: {
                          1: 3,
                          2: 5,
                        },
                      },
                      {
                        content: "alert(demo.age);",
                        levels: {
                          3: 3,
                        },
                      },
                      {
                        content: "alert(demo.name);//得到被继承的属性",
                        levels: {
                          4: 3,
                          5: 5,
                          6: 5,
                        },
                      },
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 5,
                title: "Javascript如何实现继承？",
              },
              {
                id: "0102010306",
                status: 1,
                cont_type: 1,
                content: [
                  "this 总是指向函数的直接调用者 ( 而非间接调用者)",
                  "如果有 new 关键字， this 指向 new 出来的那个对象",
                  "在事件中， this 指向触发这个事件的对象， 特殊的是，this 总是指向全局对象 Window",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 6,
                title: "谈谈This对象的理解",
              },
              {
                id: "0102010307",
                status: 1,
                cont_type: 1,
                content: [
                  "W3C 中定义事件的发生经历三个阶段：捕获阶段 ( capturing ) 、 目标阶段( targetin ) 、冒泡阶段 ( bubbling )",
                  "冒泡型事件： 当你使用事件冒泡时， 子级元素先触发， 父级元素后触发",
                  "捕获型事件： 当你使用事件捕获时， 父级元素先触发， 子级元素后触发",
                  "DOM 事件流： 同时支持两种事件模型：捕获型事件和冒泡型事件",
                  "阻止冒泡：在 W3c 中，使用 stopPropagation() 方法；在IE下设置 cancelBubble =true",
                  "阻止捕获：阻止事件的默认行为，例如 click - <a> 后的跳转 。在 W3c 中，使用preventDefault() 方法，在 IE 下设置 window.event.returnValue = false",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 7,
                title: "事件模型",
              },
              {
                id: "0102010308",
                status: 1,
                cont_type: 1,
                content: [
                  "创建⼀个空对象， 并且 this 变量引用该对象， 同时还继承了该函数的原型",
                  "属性和方法被加⼊到 this 引用的对象中",
                  "新创建的对象由 this 所引用， 并且最后隐式的返回 this",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 8,
                title: "new操作符具体干了什么呢?",
              },
              {
                id: "0102010309",
                status: 1,
                cont_type: 1,
                content: [
                  "Ajax 的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎)， 通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascrip t来操作 DOM 而更新页面 。使用户操作与服务器响应异步化 。这其中最关键的⼀步就是从服务器获得请求数据",
                  {
                    cont_type: 5,
                    content: "//代码待完善",
                  },
                  "Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核⼼机制",
                  {
                    cont_type: 5,
                    content:
                      "/** 1. 创建连接 **/\nvar xhr = null;\nxhr = new XMLHttpRequest()\n/** 2. 连接服务器 **/\nxhr.open( 'get', url, true)\n/** 3. 发送请求 **/\nxhr.send(null);\n/** 4. 接受请求 **/\nxhr.onreadystatechange = function(){\n  if(xhr.readyState == 4){\n    if(xhr.status == 200){\n      success(xhr.responseText);\n    } else {\n      /** false **/\n      fail && fail(xhr.status);\n    }\n  }\n}",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 9,
                title: "Ajax原理",
              },
              {
                id: "0102010310",
                status: 1,
                cont_type: 3,
                content: [
                  '首先了解下浏览器的同源策略 同源策略 /SOP ( Same origin policy) 是⼀种约定， 由Netscape公司1995年引⼊浏览器， 它是浏览器最核⼼也最基本的安全功能， 如果缺少了同源策略， 浏览器很容易受到 XSS 、 CSFR 等攻击 。所谓同源是指"协议+域名+端口"三者相同， 即便两个不同的域名指向同⼀个ip地址，也非同源',
                  {
                    title: "那么怎样解决跨域问题的呢？",
                    content: [
                      {
                        title: "通过jsonp跨域",
                        cont_type: 5,
                        content:
                          "var script = document. createElement( ' script' ) ;\nscript.type = 'text/javascript';\n// 传参并指定回调执行函数为onBack\nscript.src = 'http://www.....:8080/login?user=admin&callback=onBack';\ndocument.head.appendChild(script);\n// 回调执行函数\nfunction onBack(res) {\nalert(JSON.stringify(res));\n}",
                      },
                      {
                        title: "document.domain + iframe跨域（此方案仅限主域相同， 子域不同的跨域应用场景）",
                        cont_type: 5,
                        content:
                          "1) 父窗口： (http://www.domain.com/a.html)\n < iframe id= \" iframe\" src= \" http: / / child. domain. com/ b. html\" > < / iframe>\n <script>\n document.domain = 'domain.com';\n var user = 'admin';\n </script>\n 2) 子窗口： (http://child.domain.com/b.html)\n document.domain = 'domain.com';\n // 获取父窗口中变量\n alert( 'get js data from parent ---> ' + window.parent.user);",
                      },
                      "nginx代理跨域",
                      "nodejs中间件代理跨域",
                      "后端在头部信息里面设置安全域名",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 10,
                title: "如何解决跨域问题?",
              },
              {
                id: "0102010311",
                status: 1,
                cont_type: 1,
                content: [
                  "立即执行函数,不暴露私有成员",
                  {
                    cont_type: 5,
                    content:
                      "var module1 = ( function( ) {\n  var _count = 0;\n  var m1 = function(){\n    //...\n  };\n  var m2 = function(){\n    //...\n  };\n  return {\n    m1 : m1,\n    m2 : m2\n  };\n})();",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 11,
                title: "模块化开发怎么做？",
              },
              {
                id: "0102010312",
                status: 1,
                cont_type: 1,
                content: [
                  "defer（只支持 IE）：并行加载 js 文件，会按照页面上 script 标签的顺序执行",
                  "async：并行加载 js 文件，下载完成立即执行，不会按照页面上 script 标签的顺序执行",
                  "动态创建 DOM 方式 ( 用得最多)",
                  "按需异步载⼊ js",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 12,
                title: "异步加载JS的方式有哪些？",
              },
              {
                id: "0102010313",
                status: 1,
                cont_type: 1,
                content: [
                  "内存泄漏指任何对象在您不再拥有或需要它之后仍然存在",
                  "setTimeout 的第⼀个参数使用字符串而非函数的话，会引发内存泄漏",
                  "闭包 、控制台日志 、循环 (在两个对象彼此引用且彼此保留时，就会产生⼀个循环)",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 13,
                title: "那些操作会造成内存泄漏？",
              },
              {
                id: "0102010314",
                status: 1,
                cont_type: 1,
                content: [
                  "数据体积方面：JSON 相对 于XML 来讲，数据的体积⼩ ，传递的速度更快些。",
                  "数据交互方面：JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互",
                  "数据描述方面：JSON 对数据的描述性比 XML 较差",
                  "传输速度方面：JSON 的速度要远远快于 XML",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 14,
                title: "XML和JSON的区别？",
              },
              {
                id: "0102010315",
                status: 1,
                cont_type: 1,
                content: [
                  "CommonJS 是服务器端模块的规范， Node.js 采用了这个规范 。 CommonJS 规范加载模块是同步的，也就是说， 只有加载完成，才能执⾏后面的操作 。 AMD 规范则是非同步加载模块， 允许指定回调函数",
                  "AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对module.exports 或 exports 的属性赋值来达到暴露模块对象的目的",
                  "CommonJS 的规范中，每个 JavaScript ⽂件就是⼀个独立的模块上下⽂ ( modulecontext )， 在这个上下⽂中默认创建的属性都是私有的 。也就是说，在⼀个⽂件定义的变量 ( 还包括函数和类)， 都是私有的，对其他⽂件是不可⻅的。",
                  "CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适用",
                  "AMD 异步， 需要定义回调 define ⽅式",
                  "es6 ⼀个模块就是⼀个独立的⽂件，该⽂件内部的所有变量，外部⽆法获取 。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量 es6 还可以导出类 、⽅法， 自动适用严格模式",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 15,
                title: "说说你对AMD和Commonjs的理解",
              },
              {
                id: "0102010316",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "sql注⼊",
                    content: [
                      {
                        title: "原理：",
                        content: "就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串， 最终达到欺骗服务器执行恶意的SQL命令",
                      },
                      {
                        title: "防范：",
                        content: [
                          "永远不要信任用户的输⼊ ，要对用户的输⼊进行校验， 可以通过正则表达式， 或限制⻓度，对单引号和双 - 进行转换等",
                          "永远不要使用动态拼装SQL， 可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取",
                          "永远不要使用管理员权限的数据库连接， 为每个应用使用单独的权限有限的数据库连接",
                          "不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息}",
                        ],
                      },
                    ],
                  },
                  {
                    title: "XSS(cross-site scripting)",
                    content: [
                      {
                        title: "原理：",
                        content:
                          "指的是攻击者往 Web ⻚⾯里插⼊恶意 html 标签或者 javascript 代码 。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加⼀个恶意表单， 当用户提交表单的时候，却把信息传送到攻击者的服务器中， 而不是用户原本以为的信任站点",
                      },
                      {
                        title: "防范：",
                        content: [
                          "首先代码里对用户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；",
                          "其次任何内容写到⻚⾯之前都必须加以encode， 避免不⼩⼼把 html tag 弄出来 。这⼀个层⾯做好， 至少可以堵住超过⼀半的XSS 攻击",
                        ],
                      },
                    ],
                  },
                  {
                    title: "CSRF",
                    content: [
                      {
                        title: "原理",
                        content: ["是⼀种挟制用户在当前已登录的 Web 应用程序上执⾏非本意的操作的攻击⽅法"],
                      },
                      {
                        title: "防范",
                        content: ["服务端的 CSRF 方式方法很多样，但总的思想都是⼀致的，就是在客户端页面增加伪随机数", "通过验证码的方法"],
                      },
                    ],
                  },
                  {
                    title: "XSS与CSRF有什么区别吗？",
                    cont_type: 6,
                    content: [
                      "XSS 是获取信息，不需要提前知道其他用户⻚⾯的代码和数据包 。 CSRF 是代替用户完成指定的动作， 需要知道其他用户⻚⾯的代码和数据包 。要完成⼀次 CSRF 攻击， 受害者必须依次完成两个步骤",
                      "登录受信任网站 A ， 并在本地生成 Cookie",
                      "在不登出 A 的情况下， 访问危险网站 B",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 16,
                title: "常见web安全及防护原理",
              },
              {
                id: "0102010317",
                status: 1,
                cont_type: 3,
                content: [
                  "同源策略指的是：协议， 域名，端⼝相同， 同源策略是⼀种安全协议",
                  "举例说明： 比如⼀个黑客程序，他利用 Iframe 把真正的银⾏登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容， 这样用户名，密码就轻松到手了。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 17,
                title: "为什么要有同源限制？",
              },
              {
                id: "0102010318",
                status: 1,
                cont_type: 1,
                content: [
                  "offsetWidth/offsetHeight 返回值包含content + padding + border，效果与e.getBoundingClientRect()相同",
                  "clientWidth/clientHeight 返回值只包含content + padding， 如果有滚动条，也不包含滚动条",
                  "scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 18,
                title: "offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别",
              },
              {
                id: "0102010319",
                status: 1,
                cont_type: 1,
                content: [
                  "对象字面量： var obj = {};",
                  "构造函数： var obj = new Object();",
                  "Object.create(): var obj = Object.create(Object.prototype);",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 19,
                title: "javascript有哪些方法定义对象",
              },
              {
                id: "0102010320",
                status: 1,
                cont_type: 3,
                content: ["undefined 、 null 、 boolean 、 number 、 string、symbol"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 21,
                title: "介绍js的基本数据类型",
              },
              {
                id: "0102010321",
                status: 1,
                cont_type: 1,
                content: [
                  "Object 是 JavaScript 中所有对象的父对象",
                  "数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String",
                  "其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 22,
                title: "介绍js有哪些内置对象",
              },
              {
                id: "0102010322",
                status: 1,
                cont_type: 1,
                content: [
                  "栈：原始数据类型 ( Undefined ， Null ， Boolean ， Number 、 String )",
                  "堆：引用数据类型 ( 对象 、数组和函数)",
                  "两种类型的区别是：存储位置不同；",
                  "原始数据类型直接存储在栈( stack )中的简单数据段， 占据空间⼩ 、大⼩固定，属于被频繁使用数据，所以放入栈中存储；",
                  "引用数据类型存储在堆( heap )中的对象, 占据空间大 、大⼩不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址 。当解释器寻找引用值时，会首先检索其",
                  "在栈中的地址， 取得地址后从堆中获得实体",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 23,
                title: "JavaScript有几种类型的值",
              },
              {
                id: "0102010323",
                status: 1,
                cont_type: 1,
                content: [
                  "它的功能是把对应的字符串解析成 JS 代码并运⾏",
                  "应该避免使用 eval ，不安全，非常耗性能 ( 2 次，⼀ 次解析成 js 语句，⼀ 次执⾏)",
                  "由 JSON 字符串转换为JSON对象的时候可以用 eval，var obj =eval('('+ str +')')",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 24,
                title: "eval是做什么的",
              },
              {
                id: "0102010324",
                status: 1,
                cont_type: 1,
                content: [
                  "undefined 表示不存在这个值。",
                  'undefined :是⼀个表示"无"的原始值或者说表示"缺少值"，就是此处应该有⼀个值，但',
                  "是还没有定义 。当尝试读取时会返回 undefined",
                  "例如变量被声明了，但没有赋值时，就等于 undefined",
                  "null 表示⼀个对象被定义了，值为“空值”",
                  "null : 是⼀个对象(空对象, 没有任何属性和方法)",
                  "例如作为函数的参数，表示该函数的参数不是对象；",
                  "在验证 null 时，⼀ 定要使用 === ， 因为 == 无法分别 null 和 undefined",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 25,
                title: "null， undefined 的区别",
              },
              {
                id: "0102010325",
                status: 1,
                cont_type: 1,
                content: [
                  "use strict 是⼀种 ECMAscript 5 添加的 (严格) 运⾏模式,这种模式使得 Javascript在更严格的条件下运⾏ ,使 JS 编码更加规范化的模式,消除 Javascript 语法的⼀些不合理 、不严谨之处，减少⼀些怪异⾏为",
                  {
                    title: "说说严格模式的限制",
                    content: ["变量必须声明后再使用", "函数的参数不能有同名属性， 否则报错", "不能使用 with 语句", "禁止 this 指向全局对象"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 26,
                title: 'javascript 代码中的"use strict";是什么意思',
              },
              {
                id: "0102010326",
                status: 1,
                cont_type: 1,
                content: [
                  "同步：浏览器访问服务器请求，用户看得到页面刷新， 重新发请求,等请求完， 页面刷新，新内容出现，用户看到新内容,进⾏下⼀步操作",
                  "异步：浏览器访问服务器请求，用户正常操作， 浏览器后端进⾏请求 。等请求完， 页面不刷新，新内容也会出现，用户看到新内容",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 27,
                title: "同步和异步的区别",
              },
              {
                id: "0102010327",
                status: 1,
                cont_type: 1,
                content: [
                  "新增模板字符串 ( 为 JavaScript 提供了简单的字符串插值功能)",
                  "箭头函数",
                  "for-of ( 用来遍历数据—例如数组中的值 。)",
                  "arguments 对象可被不定参数和默认参数完美代替。",
                  "ES6 将p romise 对象纳⼊规范，提供了原生的 Promise 对象。",
                  "增加了 let 和 const 命令，用来声明变量。",
                  "增加了块级作用域。",
                  "let 命令实际上就增加了块级作用域。",
                  "还有就是引⼊ module 模块的概念",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 28,
                title: "谈谈你对ES6的理解",
              },
              {
                id: "0102010328",
                status: 1,
                cont_type: 1,
                content: [
                  "面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤⼀步⼀步实现，使用的时候⼀个⼀个依次调用就可以了",
                  "面向对象是把构成问题事务分解成各个对象， 建立对象的目的不是为了完成⼀个步骤， 而是为了描叙某个事物在整个解决问题的步骤中的⾏为",
                  "面向对象是以功能来划分问题， 而不是步骤",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 29,
                title: "什么是面向对象编程及面向过程编程， 它们的异同和优缺点",
              },
              {
                id: "0102010329",
                status: 1,
                cont_type: 1,
                content: [
                  "基本思想是使用对象， 类， 继承， 封装等基本概念来进⾏程序设计",
                  {
                    title: "优点",
                    content: [
                      "易维护：采用面向对象思想设计的结构， 可读性高， 由于继承的存在， 即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的",
                      "易扩展",
                      "开发⼯作的重用性 、继承性高， 降低重复⼯作量。",
                      "缩短了开发周期",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 30,
                title: "面向对象编程思想",
              },
              {
                id: "0102010330",
                status: 1,
                cont_type: 1,
                content: [
                  "可用性 ( Usability)： 产品是否容易上⼿ ，用户能否完成任务，效率如何， 以及这过程中用户的主观感受可好， 是从用户的⻆度来看产品的质量 。可用性好意味着产品质量高， 是企业的核⼼竞争⼒",
                  "可访问性 (Accessibility)： Web内容对于残障用户的可阅读和可理解性",
                  "可维护性 ( Maintainability)：⼀般包含两个层次，⼀ 是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好 。⼆是代码是否容易被⼈理解， 是否容易修改和增强功能。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 31,
                title: "对web标准、可用性、可访问性的理解",
              },
              {
                id: "0102010331",
                status: 1,
                cont_type: 1,
                content: [
                  "instanceof：arr instanceof Array; //true",
                  "constructor：arr.constructor == Array; //true",
                  "isArray()：Array.isArray(arr); //true",
                  "typOf 函数：const typeOf = (ele) = > Object.prototype.toString.call(ele).split(' ')[1].slice(0,-1); typeOf(arr) === 'Array'; // true",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 32,
                title: "如何通过JS判断⼀个数组",
              },
              {
                id: "0102010332",
                status: 1,
                cont_type: 1,
                content: [
                  "let 命令不存在变量提升， 如果在 let 前使用，会导致报错",
                  "如果块区中存在 let 和 const 命令，就会形成封闭作用域",
                  "不允许重复声明， 因此，不能在函数内部重新声明参数",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 33,
                title: "谈⼀谈let与var的区别",
              },
              {
                id: "0102010333",
                status: 1,
                cont_type: 1,
                content: [
                  '简单说， "函数式编程"是⼀种"编程范式" ( programming paradigm)， 也就是如何编写程序的方法论',
                  '它具有以下特性： 闭包和高阶函数 、惰性计算 、递归 、函数是"第⼀等公民"、只用"表达式"',
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 34,
                title: "谈⼀谈你理解的函数式编程",
              },
              {
                id: "0102010334",
                status: 1,
                cont_type: 1,
                content: [
                  "函数体内的 this 对象，就是定义时所在的对象， 而不是使用时所在的对象",
                  "不可以当作构造函数，也就是说，不可以使用 new 命令， 否则会抛出⼀个错误",
                  "不可以使用 arguments 对象，该对象在函数体内不存在 。如果要用， 可以用 Rest 参数代替",
                  "不可以使用 yield 命令， 因此箭头函数不能用作 Generator 函数",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 35,
                title: "谈⼀谈箭头函数与普通函数的区别？",
              },
              {
                id: "0102010335",
                status: 1,
                cont_type: 3,
                content: [
                  "this的指向在函数定义的时候是确定不了的， 只有函数执⾏的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象",
                  {
                    title: "《javascript语⾔精髓》 中大概概括了4种调用方式：",
                    content: ["方法调用模式", "函数调用模式", "构造器调用模式", "pply/call调用模式"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 36,
                title: "谈⼀谈函数中this的指向",
              },
              {
                id: "0102010336",
                status: 1,
                cont_type: 3,
                content: [
                  "数据类型 、运算 、对象 、Function、继承 、闭包 、作用域 、原型链 、事件 、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏 、跨域 、异步装载 、模板引擎 、前端 MVC 、 路由 、模块化 、 Canvas 、 ECMAScript",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 37,
                title: "对原生Javascript了解程度",
              },
              {
                id: "0102010337",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "CSS3 的动画的优点",
                    content: ["在性能上会稍微好⼀些， 浏览器会对 CSS3 的动画做⼀些优化", "代码相对简单"],
                  },
                  {
                    title: "缺点",
                    content: ["在动画控制上不够灵活", "兼容性不好"],
                  },
                  "JavaScript 的动画正好弥补了这两个缺点，控制能⼒很强， 可以单帧的控制 、变换， 同时写得好完全可以兼容 IE6 ， 并且功能强大 。对于⼀些复杂控制的动画，使用javascript 会比较靠谱 。而在实现⼀些⼩的交互动效的时候，就多考虑考虑 CSS 吧",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 38,
                title: "Js动画与CSS动画区别及相应实现",
              },
              {
                id: "0102010338",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 39,
                title: "JS 数组和对象的遍历方式，以及几种方式的比较",
              },
              {
                id: "0102010339",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "创建新节点",
                    content: [
                      "createDocumentFragment() //创建⼀个DOM片段",
                      "createElement() //创建⼀个具体的元素",
                      "createTextNode() //创建⼀个文本节点",
                    ],
                  },
                  {
                    title: "添加、移除、替换、插入",
                    content: ["appendChild()  //添加", "removeChild()  //移除", "replaceChild()  //替换", "insertBefore()  //插入"],
                  },
                  {
                    title: "查找",
                    content: [
                      "getElementsByTagName() //通过标签名称",
                      "getElementsByName() //通过元素的Name属性的值",
                      "getElementById() //通过元素Id， 唯⼀性",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 40,
                title: "怎样添加、移除、移动、复制、创建和查找节点",
              },
              {
                id: "0102010340",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "全局变量",
                    content: ["Infinity 代表正的无穷大的数值。", "NaN 指示某个值是不是数字值。", "undefined 指示未定义的值。"],
                  },
                  {
                    title: "全局函数",
                    content: [
                      "decodeURI() 解码某个编码的 URI 。",
                      "decodeURIComponent() 解码⼀个编码的 URI 组件。",
                      "encodeURI() 把字符串编码为 URI。",
                      "encodeURIComponent() 把字符串编码为 URI 组件。",
                      "escape() 对字符串进行编码。",
                      "eval() 计算 JavaScript 字符串， 并把它作为脚本代码来执行。",
                      "isFinite() 检查某个值是否为有穷大的数。",
                      "isNaN() 检查某个值是否是数字。",
                      "Number() 把对象的值转换为数字。",
                      "parseFloat() 解析⼀个字符串并返回⼀个浮点数。",
                      "parseInt() 解析⼀个字符串并返回⼀个整数。",
                      "String() 把对象的值转换为字符串。",
                      "unescape() 对由 escape() 编码的字符串进行解码",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 41,
                title: "Javascript全局函数和全局变量",
              },
              {
                id: "0102010341",
                status: 1,
                cont_type: 1,
                content: [
                  "减少 HTTP 请求数",
                  "减少 DNS 查询",
                  "使用 CDN",
                  "避免重定向",
                  "图片懒加载",
                  "减少 DOM 元素数量",
                  "75/115",
                  "2023/4",
                  "使用外部 JavaScript",
                  "压缩 JavaScript 、",
                  "优化 CSS Sprite",
                  "使用 iconfont",
                  "第⼀部分：基础篇 | EncodeStudio 和 CSS",
                  "CSS 、字体 、图片等",
                  "字体裁剪",
                  "多域名分发划分内容到不同域名",
                  "尽量减少 iframe 使用",
                  "避免图片 src 为空",
                  "把样式表放在 link 中",
                  "把 JavaScript 放在页面底部",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 42,
                title: "项目做过哪些性能优化？",
              },
              {
                id: "0102010342",
                status: 1,
                cont_type: 3,
                content: [
                  "浏览器缓存分为强缓存和协商缓存 。当客户端请求某个资源时， 获取缓存的流程如下",
                  "先根据这个资源的⼀些 http header 判断它是否命中强缓存， 如果命中，则直接从本地获取缓存资源，不会发请求到服务器；",
                  "当强缓存没有命中时，客户端会发送请求到服务器， 服务器通过另⼀些 request header验证这个资源是否命中协商缓存，称为 http 再验证， 如果命中， 服务器将请求返回，但不返回资源， 而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；",
                  "强缓存和协商缓存共同之处在于， 如果命中缓存， 服务器都不会返回资源； 区别是， 强缓存不对发送请求到服务器，但协商缓存会。",
                  "当协商缓存也没命中时， 服务器就会将资源发送回客户端。",
                  "当 ctrl+f5 强制刷新网页时， 直接从服务器加载，跳过强缓存和协商缓存；",
                  "当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；",
                  {
                    title: "强缓存",
                    content: [
                      "实现强缓存可以通过两种响应头实现： Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200",
                      "Expires ( 该字段是 http1.0串，代表缓存资源的过期时间)",
                      "时的规范，值为⼀个绝对时间的 GMT 格式的时间字符",
                      "Cache-Control:max-age ( 该字段是 http1.1 的规范， 强缓存利用其 max-age 值来判断缓存资源的最大生命周期， 它的值单位为秒)",
                    ],
                  },
                  {
                    title: "协商缓存",
                    content: [
                      "Last-Modified ( 值为资源最后更新时间， 随服务器response返回)",
                      "If-Modified-Since ( 通过比较两个时间来判断资源在两次请求期间是否有过修改， 如果没有修改，则命中协商缓存)",
                      "ETag (表示资源内容的唯⼀标识， 随服务器 response 返回)",
                      "If-None-Match ( 服务器通过比较请求头部的 If-None-Match 与当前资源的 ETag 是否⼀致来判断资源是否在两次请求之间有过修改， 如果没有修改，则命中协商缓存)",
                    ],
                  },
                  {
                    title: "选择合适的缓存策略",
                    content: [
                      "对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在⼀些特殊的地方可能需要选择特殊的缓存策略",
                      "对于某些不需要缓存的资源， 可以使用 Cache-control: no-store ，表示该资源不需要缓存",
                      "对于频繁变动的资源， 可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。",
                      "对于代码文件来说， 通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进⾏指纹处理，⼀ 旦文件名变动就会立刻下载新的文件",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 43,
                title: "浏览器缓存",
              },
              {
                id: "0102010343",
                status: 1,
                cont_type: 1,
                content: ["electron 实际上是⼀个套了 Chrome 的 nodeJS 程序。", "Chrome ( ⽆各种兼容性问题)；", "Chrome ( ⽆各种兼容性问题)；"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 44,
                title: "尽可能多的说出你对 Electron 的理解",
              },
              {
                id: "0102010344",
                status: 1,
                cont_type: 1,
                content: [
                  "浅拷贝：只复制⼀份原始对象的引用",
                  "深拷贝：对原始对象属性所引用的对象进行进行递归拷贝",
                  {
                    title: "JSON.parse(JSON.stringify(object))的局限性",
                    content: ["会忽略 undefined", "不能序列化函数", "不能解决循环引用的对象"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 45,
                title: "深浅拷贝",
              },
              {
                id: "0102010345",
                status: 1,
                cont_type: 1,
                content: ["防抖：", "节流："],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 46,
                title: "防抖/节流",
              },
              {
                id: "0102010346",
                status: 1,
                cont_type: 1,
                content: [
                  "定义：",
                  {
                    content: "同名变量忽略原则;同名函数覆盖原则；同名函数和变量覆盖原则",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 47,
                title: "谈谈变量提升？",
              },
              {
                id: "0102010347",
                status: 1,
                cont_type: 1,
                content: [
                  "单线程 - 只有⼀个线程， 只能做⼀件事",
                  {
                    title: "原因 - 避免 DOM 渲染的冲突",
                    content: [
                      "浏览器需要渲染 DOM",
                      "JS 可以修改 DOM 结构",
                      "JS 执行的时候， 浏览器 DOM 渲染会暂停",
                      "两段 JS 也不能同时执行 (都修改 DOM 就冲突了)",
                      "webworker 支持多线程，但是不能访问 DOM",
                    ],
                  },
                  "解决方案 - 异步",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 48,
                title: "什么是单线程，和异步的关系",
              },
              {
                id: "0102010348",
                status: 1,
                cont_type: 3,
                content: [
                  "首先， js 是单线程的， 主要的任务是处理用户的交互， 而用户的交互无非就是响应 DOM 的增删改，使用事件队列的形式，⼀ 次事件循环只处理⼀个事件响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件，那么事件队列的事件从哪里被 push 进来的呢 。那就是另外⼀个线程叫事件触发线程做的事情了，他的作用主要是在定时触发器线程 、异步 HTTP 请求线程满足特定条件下的回调函数 push 到事件队列中， 等待 js 引擎空闲的时候去执行， 当然js引擎执行过程中有优先级之分， 首先js引擎在⼀次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask ( promise) ， 如果有那就优先执行微任务， 如果没有，在去查找宏任务 macrotask ( setTimeout、setInterval) 进行执行",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 49,
                title: "说说事件循环机制（event loop）",
              },
              {
                id: "0102010349",
                status: 1,
                cont_type: 1,
                content: [
                  "事件流分为两种，捕获事件流和冒泡事件流",
                  "事件流分为三个阶段，⼀个是捕获节点，⼀个是处于目标节点阶段，⼀个是冒泡阶段",
                  "捕获事件流从根节点开始执行，⼀ 直往子节点查找执行， 直到查找执行到目标节点",
                  "冒泡事件流从目标节点开始执行，⼀ 直往父节点冒泡查找执行， 直到查到到根节点",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 50,
                title: "说说事件流",
              },
              {
                id: "0102010350",
                status: 1,
                cont_type: 1,
                content: [
                  "可参考：https://segmentfault.com/a/1190000013396601",
                  {
                    cont_type: 5,
                    content:
                      "// 三个常量用于表示状态\nconst PENDING = 'pending'\nconst RESOLVED = 'resolved'\nconst REJECTED = 'rejected'\nfunction MyPromise(fn) {\nconst that = this\nthis.state = PENDING\n// value 变量用于保存 resolve 或者 reject 中传入的值\nthis.value = null\n// 用于保存 then 中的回调， 因为当执行完 Promise 时状态可能还是等待中， 这时候应该把\nthat.resolvedCallbacks = []\nthat.rejectedCallbacks = []\nfunction resolve(value) {\n// 首先两个函数都得判断当前状态是否为等待中\nif(that.state === PENDING) {\nthat.state = RESOLVED\nthat.value = value\n// 遍历回调数组并执行\nthat.resolvedCallbacks.map(cb=>cb(that.value))\n}\n}\nfunction reject(value) {\n  if(that.state === PENDING) {\n    that.state = REJECTED\n    that.value = value\n    that.rejectedCallbacks.map(cb=>cb(that.value))\n    }\n    }\n    // 完成以上两个函数以后，我们就该实现如何执行 Promise 中传入的函数了\n    try {\n    fn(resolve,reject)\n    }cach(e){\n    reject(e)\n    }\n}\n// 最后我们来实现较为复杂的 then 函数\nMyPromise.prototype.then = function(onFulfilled,onRejected){\nconst that = this\n// 判断两个参数是否为函数类型， 因为这两个参数是可选参数\nonFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v=>v\nonRejected = typeof onRejected === 'function' ? onRejected : e=>throw e\n// 当状态不是等待态时，就去执行相对应的函数 。如果状态是等待态的话，就往回调函数中 push\nif(this.state === PENDING) {\nthis.resolvedCallbacks.push(onFulfilled)\nthis.rejectedCallbacks.push(onRejected)\n}\nif(this.state === RESOLVED) {\nonFulfilled(that.value)\n}\nif(this.state === REJECTED) {\nonRejected(that.value)\n}\n}",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 51,
                title: "请手写实现⼀个 promise",
              },
              {
                id: "0102010351",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "caller：",
                    content: [
                      "返回⼀个函数的引用， 这个函数调用了当前的函数。",
                      "这个属性只有当函数在执行时才有用",
                      "如果在 javascript 程序中， 函数是由顶层调用的，则返回 null",
                      "functionName.caller: functionName 是当前正在执行的函数。",
                      {
                        cont_type: 5,
                        content: "function a() {\n console.log(a.caller)\n}",
                      },
                    ],
                  },
                  {
                    title: "callee：",
                    content: [
                      "返回正在执行的函数本身的引用， 它是 arguments 的⼀个属性",
                      "这个属性只有在函数执行时才有效",
                      "它有⼀个 length 属性， 可以用来获得形参的个数， 因此可以用来比较形参和实参个数是否⼀致， 即比较 arguments.length 是否等于 arguments.callee.length",
                      {
                        title: "它可以用来递归匿名函数",
                        cont_type: 5,
                        content: "function a() {\n  console.log(arguments.callee)\n}",
                      },
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 52,
                title: "caller 和 callee 的区别",
              },
              {
                id: "0102010352",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "jQuery ajax",
                    content: [
                      {
                        cont_type: 5,
                        content:
                          "$.ajax({\n  type: 'POST',\n  url: url,\n  data: data,\n  dataType: dataType\n  success: function\n  error: function ()\n});",
                      },
                      {
                        title: "优缺点：",
                        content: [
                          "第⼀部分：基础篇 | EncodeStudio 本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮",
                          "基于原生的 XHR 开发， XHR 本身的架构不清晰， 已经有了 fetch 的替代方案",
                          "JQuery 整个项目太大， 单纯使用 ajax 却要引入整个 JQuery 非常的不合理 ( 采取个性化打包的方案⼜不能享受CDN服务)",
                        ],
                      },
                    ],
                  },
                  {
                    title: "axios",
                    content: [
                      {
                        cont_type: 5,
                        content:
                          "axios({\nmethod: 'post',\nurl: '/user/12345',\ndata: {\nfirstName: 'Fred',\nlastName: 'Flintstone'\n}\n})\n.then(function (response) {\nconsole.log(response);\n})\n.catch(function (error) {\nconsole.log(error);\n});",
                      },
                      {
                        title: "优缺点：",
                        content: [
                          "从浏览器中创建 XMLHttpRequest",
                          "从 node.js 发出 http 请求",
                          "支持 Promise API",
                          "拦截请求和响应",
                          "转换请求和响应数据",
                          "取消请求",
                          "自动转换 JSON 数据",
                          "客户端支持防止 CSRF/XSRF",
                        ],
                      },
                    ],
                  },
                  {
                    title: "fetch",
                    content: [
                      {
                        cont_type: 5,
                        content:
                          'try {\n  let response = await fetch(url);\n  let data = response.json();\n  console.log(data);\n} catch(e) {\n  console.log("Oops, error", e);\n}',
                      },
                      {
                        title: "优缺点：",
                        content: [
                          "fetch 只对⽹络请求报错，对 400 ， 500 都当做成功的请求， 需要封装去处理",
                          "fetch 默认不会带 cookie ， 需要添加配置项",
                          "fetch 不支持 abort ，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行， 造成了量的浪费",
                          "fetch 没有办法原生监测请求的进度， 而XHR可以",
                        ],
                      },
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 53,
                title: "ajax 、axios 、fetch区别",
              },
              {
                id: "0102010353",
                status: 1,
                cont_type: 1,
                content: [
                  "定义：多台服务器共同协作，不让其中某⼀台或几台超额工作，发挥服务器的最大作用",
                  "http 重定向负载均衡：调度者根据策略选择服务器以302响应请求， 缺点只有第⼀次有效果，后续操作维持在该服务器 dns负载均衡：解析域名时，访问多个 ip 服务器中的⼀个( 可监控性较弱)",
                  "反向代理负载均衡：访问统⼀的服务器， 由服务器进行调度访问实际的某个服务器，对统⼀的服务器要求大，性能受到 服务器群的数量",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 54,
                title: "负载均衡",
              },
              {
                id: "0102010354",
                status: 1,
                cont_type: 3,
                content: ["内容分发网络， 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快 、更稳定。"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 55,
                title: "CDN",
              },
              {
                id: "0102010355",
                status: 1,
                cont_type: 1,
                content: [
                  "定义：程序中⼰动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。",
                  "js中可能出现的内存泄漏情况，结果：变慢， 崩溃，延迟大等",
                  {
                    title: "原因：",
                    content: ["全局变量", "dom 清空时， 还存在引用", "ie 中使用闭包", "定时器未清除", "⼦元素存在引起的内存泄露"],
                  },
                  {
                    title: "避免策略",
                    content: [
                      "减少不必要的全局变量， 或者生命周期较长的对象，及时对无用的数据进行垃圾回收；",
                      "注意程序逻辑， 避免“死循环”之类的；",
                      "避免创建过多的对象 原则：不用了的东西要及时归还。",
                      "减少层级过多的引用",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 56,
                title: "内存泄漏",
              },
              {
                id: "0102010356",
                status: 1,
                cont_type: 3,
                content: [
                  "ES6、7 代码输⼊ -> babylon 进行解析 -> 得到 AST ( 抽象语法树) ->plugin 用b abel-traverse 对 AST 树进行遍历转译 ->得到新的 AST 树->用 babel-generator 通过 AST 树生成 ES5 代码",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 57,
                title: "babel原理",
              },
              {
                id: "0102010357",
                status: 1,
                cont_type: 1,
                content: [
                  "后端每次路由请求都是重新访问服务器",
                  "前端路由实际上只是 JS 根据 URL 来操作 DOM 元素，根据每个页面需要的去服务端请求数据， 返回数据后和模板进行组合",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 58,
                title: "前后端路由差别",
              },
              {
                id: "0102010358",
                status: 1,
                cont_type: 1,
                content: [
                  "call 和 apply 都是为了解决改变 this 的指向 。作用都是相同的， 只是传参的方式不同。除了第⼀个参数外， call 可以接收⼀个参数列表， apply 只接受⼀个参数数组。",
                  "bind 和其他两个方法作用也是⼀致的， 只是该方法会返回⼀个函数 。并且我们可以通过 bind 实现柯里化",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 59,
                title: "bind 、call 、apply 区别",
              },
              {
                id: "0102010359",
                status: 1,
                cont_type: 1,
                content: [
                  "每个函数都有prototype属性， 除了 Function.prototype.bind() ，该属性指向原型。",
                  "每个对象都有__proto__属性，指向了创建该对象的构造函数的原型 。其实这个属性指向了 [[prototype]] ，但是 [[prototype]] 是内部属性， 我们并不能访问到，所以使用 _proto_ 来访问。",
                  "对象可以通过__proto__来寻找不属于该对象的属性， __proto__ 将对象连接起来组成了原型链。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 60,
                title: "简单说下原型链？",
              },
              {
                id: "0102010360",
                status: 1,
                cont_type: 3,
                content: ["前者存储在栈上， 后者存储在堆上"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 71,
                title: "基本数据类型和引用类型在存储上的差别",
              },
              {
                id: "0102010361",
                status: 1,
                cont_type: 1,
                content: [
                  "众所周知 JS 是门非阻塞单线程语言， 因为在最初 JS 就是为了和浏览器交互而诞生的 。如果 JS 是门多线程的语言话， 我们在多个线程中处理 DOM 就可能会发生问题 (⼀个线程中新加节点， 另⼀个线程中删除节点)， 当然可以引⼊读写锁解决这个问题。",
                  "微任务包括 process.nextTick ， promise ， Object.observe ，MutationObserver",
                  "宏任务包括 script ，UI renderin",
                  {
                    cont_type: 6,
                    content: [
                      "很多⼈有个误区，认为微任务快于宏任务， 其实是错误的 。因为宏任务中包括了 script ， 浏览器会先执⾏⼀个宏任务，接下来有异步代码的话就先执⾏微任务",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 72,
                title: "浏览器 Eventloop 和 Node 中的有什么区别",
              },
              {
                id: "0102010362",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "typeof示例",
                    cont_type: 5,
                    content:
                      "typeof 1 // ' number' typeof '1' // 'string'\ntypeof undefined // 'undefined'\ntypeof true // 'boolean'\ntypeof Symbol() // 'symbol'\ntypeof b // b 没有声明，但是还会显示 undefined\ntypeof [] // 'object' typeof {} // 'object'\ntypeof console.log // 'function'\ntypeof null // 'object'",
                  },
                  "instanceof 可以正确的判断对象的类型， 因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 73,
                title: "typeof 于 instanceof 区别",
              },
              {
                id: "0102010363",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 74,
                title: "cookie和localSrorage 、session 、indexDB 的区别",
              },
              {
                id: "0102010364",
                status: 1,
                cont_type: 1,
                content: [
                  "Load 事件触发代表页面中的 DOM ， CSS ， JS ， 图片已经全部加载完毕 。",
                  "DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待CSS ， JS ， 图片加载",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 75,
                title: "怎么判断页面是否加载完成？",
              },
              {
                id: "0102010365",
                status: 1,
                cont_type: 1,
                content: ["JSONP", "CORS", "document.domain", "postMessage"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 76,
                title: "如何解决跨域",
              },
              {
                id: "0102010366",
                status: 1,
                cont_type: 1,
                content: [
                  "这种方式通常用于获取嵌⼊页面中的第三方页面数据 。⼀个页面发送消息， 另⼀个页面判断来源并接收消息",
                  {
                    cont_type: 5,
                    content:
                      "// 发送消息端\nwindow.parent.postMessage( 'message', 'http://test.com')\n// 接收消息端\nvar mc = new MessageChannel()\nmc.addEventListener( 'message', event => {\nvar origin = event.origin || event.originalEvent.origin\nif (origin === 'http://test.com') {\nconsole.log( '验证通过')\n}\n})",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 76,
                title: "postMessage",
              },
              {
                id: "0102010367",
                status: 1,
                cont_type: 3,
                content: [
                  "本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理 。它们旨在 ( 除其他之外) 使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作 。他们还允许访问推送通知和后台同步API",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 77,
                title: "Service worker",
              },
              {
                id: "0102010368",
                status: 1,
                cont_type: 1,
                content: [
                  "重绘和回流是渲染步骤中的⼀⼩节，但是这两个步骤对于性能影响很大。",
                  "重绘是当节点需要更改外观而不会影响布局的， 比如改变 color 就叫称为重绘",
                  "回流是布局或者⼏何属性需要改变就称为回流。",
                  "回流必定会发生重绘， 重绘不⼀定会引发回流 。回流所需的成本比重绘高的多， 改变深层次的节点很可能导致父节点的⼀系列回流。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 78,
                title: "浏览器性能问题：重绘 ( Repaint) 和回流 ( Reflow)",
              },
              {
                id: "0102010369",
                status: 1,
                cont_type: 1,
                content: [
                  "转Boolean：在条件判断时， 除了 undefined ， null ， false ，0 ， -0 ， 其他所有值都转为 true ， 包括所有对象",
                  "对象转基本类型：对象在转换基本类型时， 首先会调用 valueOf 然后调用 toString 。并且这两个方法你是可以重写的",
                  {
                    title: "四则运算符",
                    cont_type: 5,
                    content:
                      "1 + '1' // '11' 2 * '2' // 4\n[1, 2] + [2, 1] // '1,22,1'\n[1, 2].toString() -> '1,2'\n[2, 1].toString() -> '2,1'\n'1,2' + '2,1' = '1,22,1'\n'a' + + 'b' // -> \"aNaN\"     //因为 + 'b' -> NaN",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 79,
                title: "类型转换",
              },
              {
                id: "0102010370",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    title: "当执行 JS 代码时，会产生三种执行上下文：",
                    content: ["全局执行上下文", "函数执行上下文", "eval 执行上下文"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 80,
                title: "执行上下文",
              },
              {
                id: "0102010371",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "DNS 预解析",
                    content: [
                      "DNS 解析也是需要时间的， 可以通过预解析的方式来预先获得域名所对应的 IP",
                      {
                        cont_type: 5,
                        content: '<link rel="dns-prefetch" href="//blog.poetries.top">',
                      },
                    ],
                  },
                  {
                    title: "预加载：可以⼀定程度上降低首屏的加载时间， 因为可以将⼀些不影响首屏但重要的⽂件延后加载， 唯⼀缺点就是兼容性不好",
                    cont_type: 5,
                    content: '< link rel= " preload" href= " http: / / example. com" >',
                  },
                  {
                    title: "预渲染：虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开， 否则就白白浪费资源去渲染",
                    cont_type: 5,
                    content: '< link rel= " prerender" href= " http: / / poetries. com" >',
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 81,
                title: "性能",
              },
              {
                id: "0102010372",
                status: 1,
                cont_type: 1,
                content: [
                  "涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？",
                  "函数提升优先于变量提升， 函数提升会把整个函数挪到作用域顶部， 变量提升只会把声明挪到作用域顶部",
                  "var 存在提升， 我们能在声明之前使用 。 let 、 const 因为暂时性死区的原因，不能在声明前使用",
                  "var 在全局作用域下声明变量会导致变量挂载在 window 上， 其他两者不会",
                  "let 和 const 作用基本⼀致，但是后者声明的变量不能再次赋值",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 82,
                title: "var 、let 及 const 区别",
              },
              {
                id: "0102010373",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 83,
                title: "原型继承和 Class 继承",
              },
              {
                id: "0102010374",
                status: 1,
                cont_type: 1,
                content: [
                  "因为 JS 采用 IEEE 754 双精度版本 ( 64 位)， 并且只要采用 IEEE 754 的语言都有该问题",
                  "解决：parseFloat( (0.1 + 0.2).toFixed(10)) === 0.3 // true",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 84,
                title: "为什么 0.1 + 0.2 != 0.3",
              },
              {
                id: "0102010375",
                status: 1,
                cont_type: 3,
                content: [
                  {
                    title: "从缓存位置上来说分为四种， 并且各自有优先级， 当依次查找缓存且都没有命中的时候，才会去请求网络",
                    content: ["Service Worker", "Memory Cache", "Disk Cache", "Push Cache", "网络请求 "],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 85,
                title: "缓存位置",
              },
              {
                id: "0102010376",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 86,
                title: "浏览器渲染原理",
              },
              {
                id: "0102010377",
                status: 1,
                cont_type: 1,
                content: [
                  "使用 transform 替代 top",
                  "使用 visibility 替换 display: none ， 因为前者只会引起重绘，后者会引发回流( 改变了布局)",
                  "不要把节点的属性值放在⼀个循环里当成循环里的变量",
                  "不要使用 table 布局， 可能很⼩的⼀个⼩改动会造成整个 table 的重新布局",
                  "动画实现的速度的选择， 动画速度越快， 回流次数越多，也可以选择使用requestAnimationFrame",
                  "CSS 选择符从右往左匹配查找， 避免节点层级过多",
                  "将频繁重绘或者回流的节点设置为图层， 图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说， 浏览器会自动将该节点变为图层。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 87,
                title: "减少重绘和回流",
              },
              {
                id: "0102010378",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 88,
                title: "函数柯里化",
              },
              {
                id: "0102010379",
                status: 1,
                cont_type: 3,
                content: ["尾递归，即在函数尾位置调⽤⾃身（或是⼀个尾调⽤本身的其他函数等等）。尾递归也是递归的⼀种特殊情形。"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 89,
                title: "尾递归",
              },
              {
                id: "0102010380",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 90,
                title: "",
              },
              {
                id: "0102010381",
                status: 1,
                cont_type: 3,
                content: [
                  "[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ， 其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array) ，对应的 radix 不合法导致解析失败。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1026,
                title: '["1", "2", "3"].map(parseInt) 答案是多少',
              },
              {
                id: "0102010382",
                status: 1,
                cont_type: 5,
                content: ["var arr = [1,2,3,4,5,6,7,8,9,10];", "arr.sort(function(){", "  return Math.random() - 0.5;", "})", "console.log(arr);"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1027,
                title: "快速的让⼀个数组乱序",
              },
              {
                id: "0102010383",
                status: 1,
                cont_type: 3,
                content: ["[...new Set(arr)]"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1028,
                title: "数组去重方法总结",
              },
              {
                id: "0102010384",
                status: 1,
                cont_type: 3,
                content: [
                  "< input id=\" input\"/ >\n  const data = {};\n  const input = document.getElementById( 'input');\n  Object.defineProperty(data, 'text', {\n    set(value) {\n      input.value = value;\n      this.value = value;\n    }\n  });\n  input.onChange = function(e) {\n   data.text = e.target.value;\n}",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1029,
                title: "请简单实现双向数据绑定 mvvm",
              },
              {
                id: "0102010385",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1030,
                title: "写⼀段JS程序提取URL中的各个GET参数",
              },
              {
                id: "0102010386",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1031,
                title: "实现每隔⼀秒钟输出1,2,3...数字",
              },
              {
                id: "0102010387",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1032,
                title: "实现⼀个函数clone",
              },
              {
                id: "0102010388",
                status: 1,
                cont_type: 1,
                content: [
                  "通过父页面 window.open() 和子页面 postMessage",
                  "异步下， 通过 window.open('about: blank') 和 tab.location.href = '*' 设置同域下共享的 localStorage 与监听 window.onstorage",
                  "重复写入相同的值无法触发",
                  "会受到浏览器隐身模式等的限制",
                  "设置共享 cookie 与不断轮询脏检查( setInterval )",
                  "借助服务端或者中间层实现",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1033,
                title: "跨标签页通讯",
              },
              {
                id: "0102010389",
                status: 1,
                cont_type: 3,
                content: [
                  "现代浏览器为 JavaScript 创造的 多线程环境 。可以新建并将部分任务分配到 worker 线程并行运行，两个线程可 独立运行， 互不⼲扰， 可通过自带的消息机制 相互通信。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1034,
                title: "Web Worker",
              },
              {
                id: "0102010390",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1035,
                title: "",
              },
              {
                id: "0102010391",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1036,
                title: "",
              },
              {
                id: "0102010392",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1037,
                title: "",
              },
              {
                id: "0102010393",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1038,
                title: "",
              },
              {
                id: "0102010394",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1039,
                title: "",
              },
              {
                id: "0102010395",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 1040,
                title: "",
              },
              {
                id: "0102010396",
                status: 1,
                cont_type: 5,
                content: [
                  "<! DOCTYPE html>",
                  '<html lang="en">',
                  "<head>",
                  '  <meta charset="UTF-8">',
                  '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
                  '  <meta http-equiv="X-UA-Compatible" content="ie=edge">',
                  "  <title>Document</title>",
                  "</head>",
                  "<body>",
                  "  <ul>控件</ul>",
                  "  <script>",
                  "    setTimeout(() => {",
                  "      // 插⼊十万条数据",
                  "      const total = 100000",
                  "      // ⼀次插⼊ 20 条，如果觉得性能不好就减少",
                  "      const once = 20",
                  "      // 渲染数据总共需要⼏次",
                  "      const loopCount = total / once",
                  "      let countOfRender = 0",
                  '      let ul = document.querySelector("ul");',
                  "      function add() {",
                  "        // 优化性能，插入不会造成回流",
                  "        const fragment = document.createDocumentFragment();",
                  "        for (let i = 0; i < once; i++) {",
                  '        const li = document.createElement("li");',
                  "        li.innerText = Math.floor(Math.random() * total);",
                  "        fragment.appendChild(li);",
                  "        }",
                  "        ul.appendChild(fragment);",
                  "        countOfRender += 1;",
                  "        loop();",
                  "      }",
                  "      function loop() {",
                  "        if (countOfRender < loopCount) {",
                  "          window.requestAnimationFrame(add);",
                  "        }",
                  "      }",
                  "      loop();",
                  "    }, 0);",
                  "  </script>",
                  "</body>",
                  "</html>",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2028,
                title: "如何渲染几万条数据并不卡住界面",
              },
              {
                id: "0102010397",
                status: 1,
                cont_type: 1,
                content: [
                  "给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件",
                  "mousedown 事件触发后， 开始拖拽",
                  "mousemove 时， 需要通过 event.clientX 和 clientY 获取拖拽位置， 并实时更新位置",
                  "mouseup 时，拖拽结束",
                  "需要注意浏览器边界的情况",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2029,
                title: "(设计题) 想实现⼀个对页面某个节点的拖曳？如何做？ (使用原生JS)",
              },
              {
                id: "0102010398",
                status: 1,
                cont_type: 1,
                content: [
                  "该组件需要提供 hook 指定渲染位置， 默认渲染在body下⾯ 。",
                  "然后改组件可以指定外层样式， 如宽度等",
                  "组件外层还需要⼀层 mask 来遮住底层内容，点击 mask 可以执⾏传进来的 onCancel 函数关闭 Dialog 。",
                  "另外组件是可控的， 需要外层传⼊ visible 表示是否可⻅ 。",
                  "然后 Dialog 可能需要自定义头head和底部 footer ， 默认有头部和底部，底部有⼀个确认按钮和取消按钮，确认按钮会执⾏外部传进来的 onOk 事件，然后取消按钮会执⾏外部传进来的 onCancel 事件。",
                  "当组件的 visible 为 true 时候，设置 body 的 overflow 为 hidden ， 隐藏 body 的滚动条， 反之显示滚动条。",
                  "组件高度可能大于⻚⾯高度， 组件内部需要滚动条。",
                  "只有组件的 visible 有变化且为 true 时候，才重渲染组件内的所有内容",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2030,
                title: "现在要你完成⼀个Dialog组件，说说你设计的思路？ 它应该有什么功能？",
              },
              {
                id: "0102010399",
                status: 1,
                cont_type: 5,
                content: [
                  "// event(事件)工具集，来源：github.com/markyun",
                  "  markyun.Event = {",
                  "  // 视能力分别使用dom0| |dom2 | |IE方式 来绑定事件",
                  "  // 参数： 操作的元素 ,事件名称 ,事件处理程序",
                  "  addEvent : function(element, type, handler) {",
                  "  if (element.addEventListener) {",
                  "  //事件类型 、需要执行的函数 、是否捕捉",
                  "  element.addEventListener(type, handler, false);",
                  "  } else if (element.attachEvent) {",
                  "  element.attachEvent( 'on' + type, function() {",
                  "  handler.call(element);",
                  "  });",
                  "  } else {",
                  "  element [ 'on' + type] = handler;",
                  "  }",
                  "  },",
                  "  // 移除事件",
                  "  removeEvent : function(element, type, handler) {",
                  "  if (element.removeEventListener) {",
                  "  element.removeEventListener(type, handler, false);",
                  "  } else if (element.datachEvent) {",
                  "  element.detachEvent( 'on' + type, handler);",
                  "  } else {",
                  "  element [ 'on' + type] = null;",
                  "  }",
                  "  },",
                  "  // 阻止事件 (主要是事件冒泡， 因为IE不支持事件捕获)",
                  "  stopPropagation : function(ev) {",
                  "    if (ev.stopPropagation) {",
                  "      ev.stopPropagation();",
                  "      } else {",
                  "      ev.cancelBubble = true;",
                  "      }",
                  "    },",
                  "  // 取消事件的默认行为",
                  "  preventDefault : function(event) {",
                  "      if (event.preventDefault) {",
                  "      event.preventDefault();",
                  "      } else {",
                  "      event.returnValue = false;",
                  "      }",
                  "      },",
                  "      // 获取事件目标",
                  "      getTarget : function(event) {",
                  "      return event.target || event.srcElement;",
                  "  }",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2031,
                title: "写⼀个通用的事件侦听器函数",
              },
              {
                id: "01020103100",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2032,
                title: "监控：页面埋点 、性能监控、异常监控",
              },
              {
                id: "01020103101",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2033,
                title: "",
              },
              {
                id: "01020103102",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2034,
                title: "",
              },
              {
                id: "01020103103",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2035,
                title: "",
              },
              {
                id: "01020103104",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2036,
                title: "",
              },
              {
                id: "01020103105",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2037,
                title: "",
              },
              {
                id: "01020103106",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2038,
                title: "",
              },
              {
                id: "01020103107",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2039,
                title: "",
              },
              {
                id: "01020103108",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020103"],
                },
                order: 2040,
                title: "",
              },
            ],
            title: "JavaScript",
            id: "01020103",
          },
          {
            label: "TypeScript",
            topics: [
              {
                id: "0102010401",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102010402",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102010403",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102010404",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102010405",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102010406",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102010407",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102010408",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102010409",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102010410",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020104"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "TypeScript",
            id: "01020104",
          },
          {
            label: "正则表达式",
            topics: [
              {
                id: "0102010501",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020105"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102010502",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020105"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102010503",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020105"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102010504",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020105"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102010505",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020105"],
                },
                order: 5,
                title: "",
              },
            ],
            title: "正则表达式",
            id: "01020105",
          },
          {
            label: "设计模式（前端常用23种）",
            topics: [
              {
                id: "0102010601",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102010602",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102010603",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102010604",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102010605",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102010606",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102010607",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102010608",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102010609",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102010610",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020106"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "设计模式（前端常用23种）",
            id: "01020106",
          },
          {
            label: "前端核心概念",
            topics: [
              {
                id: "0102010701",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "前端核心概念",
            id: "01020107",
          },
          {
            label: "VsCode设置",
            topics: [
              {
                id: "0102010801",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "VsCode设置",
            id: "01020108",
          },
          {
            label: "Git",
            topics: [
              {
                id: "0102010901",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020109"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102010902",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020109"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102010903",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020109"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102010904",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020109"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102010905",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020109"],
                },
                order: 5,
                title: "",
              },
            ],
            title: "Git",
            id: "01020109",
          },
          {
            label: "Vue",
            topics: [
              {
                id: "0102011001",
                status: 1,
                cont_type: 3,
                content: [
                  "vue.js 则是采用数据劫持结合发布者-订阅者模式的⽅式， 通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 1,
                title: "说⼀下Vue的双向绑定数据的原理",
              },
              {
                id: "0102011002",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102011003",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102011004",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102011005",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102011006",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102011007",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102011008",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102011009",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102011010",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020110"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Vue",
            id: "01020110",
          },
          {
            label: "React",
            topics: [
              {
                id: "0102011101",
                status: 1,
                cont_type: 1,
                content: [
                  "JSX 上写的事件并没有绑定在对应的真实 DOM 上， 而是通过事件代理的方式，将所有的事件都统⼀绑定在了 document 上 。这样的方式不仅减少了内存消耗， 还能在组件挂载销毁时统⼀订阅和移除事件",
                  "另外冒泡到 document 上的事件也不是原生浏览器事件， 而是 React 自⼰实现的合成事件 ( SyntheticEvent ) 。因此我们如果不想要事件冒泡的话，调用event.stopPropagation 是无效的， 而应该调用 event.preventDefault",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 1,
                title: "事件机制",
              },
              {
                id: "0102011102",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102011103",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102011104",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102011105",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102011106",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102011107",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102011108",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102011109",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102011110",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020111"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "React",
            id: "01020111",
          },
          {
            label: "Jquery",
            topics: [
              {
                id: "0102011201",
                status: 1,
                cont_type: 1,
                content: [
                  "jquery 源码封装在⼀个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传⼊ window 对象参数， 可以使 window 对象作为局部变量使用， 好处是当 jquery 中访问 window 对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象 。同样，传⼊ undefined 参数， 可以缩短查找 undefined 时的作用域链",
                  "jquery 将⼀些原型属性和方法封装在了 jquery.prototype 中， 为了缩短名称， ⼜赋值给了 jquery.fn ， 这是很形象的写法",
                  "有⼀些数组或对象的方法经常能使用到， jQuery 将其保存为局部变量以提高访问速度",
                  "jquery 实现的链式调用可以节约代码，所返回的都是同⼀个对象， 可以提高代码效率",
                  {
                    cont_type: 5,
                    content:
                      "(function( window, undefined ) {\n//用⼀个函数域包起来，就是所谓的沙箱\n//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局\n//把当前沙箱需要的外部变量通过函数参数引⼊进来\n//只要保证参数对内提供的接⼝的⼀致性，你还可以随意替换传进来的这个参数\nwindow.jQuery = window.$ = jQuery;\n})( window );",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 1,
                title: "你觉得jQuery源码有哪些写的好的地方",
              },
              {
                id: "0102011202",
                status: 1,
                cont_type: 1,
                content: [
                  "window.onload() 方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。",
                  "$(document).ready() 是 DOM 结构绘制完毕后就执行，不必等到加载完毕",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 2,
                title: "window.onload和$(document).ready",
              },
              {
                id: "0102011203",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    cont_type: 5,
                    content: "(function(window, undefined) {})(window);",
                  },
                  "jQuery 利用 JS 函数作用域的特性， 采用立即调用表达式包裹了自身，解决命名空间和变量污染问题",
                  "window.jQuery = window.$ = jQuery;",
                  "在闭包当中将 jQuery 和 $ 绑定到 window 上， 从而将 jQuery 和 $ 暴露为全局变量",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 3,
                title: "jQuery 的实现原理",
              },
              {
                id: "0102011204",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102011205",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102011206",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102011207",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102011208",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102011209",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102011210",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020112"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Jquery",
            id: "01020112",
          },
          {
            label: "移动端H5",
            topics: [
              {
                id: "0102011301",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020113"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102011302",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020113"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102011303",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020113"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102011304",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020113"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102011305",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020113"],
                },
                order: 5,
                title: "",
              },
            ],
            title: "移动端H5",
            id: "01020113",
          },
          {
            label: "微信小程序",
            topics: [
              {
                id: "0102011401",
                status: 1,
                cont_type: 3,
                content: ["使用 wx.getUserInfo ⽅法 withCredentials 为 true 时 可获取encryptedData ， 里面有 union_id 。后端需要进行对称解密"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020114"],
                },
                order: 1,
                title: "小程序关联微信公众号如何确定用户的唯⼀性",
              },
              {
                id: "0102011402",
                status: 1,
                cont_type: 1,
                content: [
                  "OpenId 是⼀个用户对于⼀个小程序／公众号的标识， 开发者可以通过这个标识识别出用户。",
                  "UnionId 是⼀个用户对于同主体微信小程序／公众号／ APP 的标识， 开发者需要在微信开放平台下绑定相同账号的主体 。开发者可通过 UnionId ， 实现多个小程序 、公众号 、甚至APP 之间的数据互通了。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020114"],
                },
                order: 2,
                title: "unionid和openid",
              },
              {
                id: "0102011403",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020114"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102011404",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020114"],
                },
                order: 4,
                title: "",
              },
            ],
            title: "微信小程序",
            id: "01020114",
          },
          {
            label: "计算机组成原理",
            topics: [
              {
                id: "0102011501",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "计算机组成原理",
            id: "01020115",
          },
          {
            label: "操作系统",
            topics: [
              {
                id: "0102011601",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "操作系统",
            id: "01020116",
          },
          {
            label: "Linux",
            topics: [
              {
                id: "0102011701",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "Linux",
            id: "01020117",
          },
          {
            label: "计算机网络",
            topics: [
              {
                id: "0102011801",
                status: 1,
                cont_type: 1,
                content: [
                  "首行是Request-Line包括：请求方法，请求URI，协议版本， CRLF",
                  "首行之后是若干行请求头， 包括general-header， request-header或者entity-header，每个⼀行以CRLF结束",
                  "请求头和消息实体之间有⼀个CRLF分隔",
                  "根据实际请求需要可能包含⼀个消息实体 ⼀个请求报文例子如下：",
                  {
                    cont_type: 5,
                    content:
                      '\n    GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1\n    Host: www.w3.org\n    Connection: keep-alive\n    Cache-Control: max-age=0\n    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/\n    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,\n    Referer: https://www.google.com.hk/\n    Accept-Encoding: gzip,deflate,sdch\n    Accept-Language: zh-CN,zh;q=0.8,en;q=0.6\n    Cookie: authorstyle=yes\n    If-None-Match: "2cc8-3e3073913b100"\n    If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT\n    name=qiu&age=25',
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 1,
                title: "HTTP request报文结构是怎样的",
              },
              {
                id: "0102011802",
                status: 1,
                cont_type: 1,
                content: [
                  "首行是状态行包括：HTTP版本，状态码，状态描述，后面跟⼀个CRLF",
                  "首行之后是若干行响应头， 包括：通用头部，响应头部，实体头部",
                  "响应头部和响应实体之间用⼀个CRLF空行分隔",
                  "最后是⼀个可能的消息实体 响应报文例子如下：",
                  {
                    cont_type: 5,
                    content:
                      '\n    HTTP/1.1 200 OK\n    Date: Tue, 08 Jul 2014 05:28:43 GMT\n    Server: Apache/2\n    Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT\n    ETag: "40d7-3e3073913b100"\n    Accept-Ranges: bytes\n    Content-Length: 16599\n    Cache-Control: max-age=21600\n    Expires: Tue, 08 Jul 2014 11:28:43 GMT\n    P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"\n    Content-Type: text/html; charset=iso-8859-1\n    \n    {"name": "qiu", "age": 25}',
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 2,
                title: "HTTP response报文结构是怎样的",
              },
              {
                id: "0102011803",
                status: 1,
                cont_type: 1,
                content: [
                  "⽀持双向通信， 实时性更强；",
                  "可以发送⽂本，也可以⼆进制⽂件；",
                  "协议标识符是 ws ，加密后是 wss ；",
                  "较少的控制开销 。连接创建后， ws 客户端 、服务端进行数据交换时，协议控制的数据包",
                  "头部较⼩ 。在不包含头部的情况下， 服务端到客户端的包头只有 2~10 字节 ( 取决于数据",
                  "包长度)， 客户端到服务端的的话， 需要加上额外的4字节的掩码 。而 HTTP 协议每次通信",
                  "都需要携带完整的头部；",
                  "⽀持扩展 。ws协议定义了扩展，用户可以扩展协议， 或者实现自定义的⼦协议 。 ( 比如⽀",
                  "持自定义压缩算法等)",
                  "⽆跨域问题。",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 3,
                title: "WebSocket特点",
              },
              {
                id: "0102011804",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 4,
                title: "http1.0、http1.1、http2.0的区别？",
              },
              {
                id: "0102011805",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102011806",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102011807",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102011808",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102011809",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102011810",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020118"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "计算机网络",
            id: "01020118",
          },
          {
            label: "Web安全",
            topics: [
              {
                id: "0102011901",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "Web安全",
            id: "01020119",
          },
          {
            label: "数据结构和算法",
            topics: [
              {
                id: "0102012001",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020120"],
                },
                order: 1,
                title: "常见排序算法的时间复杂度,空间复杂度",
              },
              {
                id: "0102012002",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "冒泡排序",
                    content: [
                      "每次比较相邻的两个数， 如果后⼀个比前⼀个小，换位置",
                      {
                        cont_type: 5,
                        content: "",
                      },
                    ],
                  },
                  {
                    title: "快速排序",
                    content: [
                      "采用二分法， 取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边",
                      {
                        cont_type: 5,
                        content: "",
                      },
                    ],
                  },
                  {
                    title: "插入排序",
                    content: [
                      "待完善",
                      {
                        cont_type: 5,
                        content: "",
                      },
                    ],
                  },
                  {
                    title: "选择排序",
                    content: [
                      "待完善",
                      {
                        cont_type: 5,
                        content: "",
                      },
                    ],
                  },
                  {
                    title: "归并排序",
                    content: [
                      "待完善",
                      {
                        cont_type: 5,
                        content: "",
                      },
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020120"],
                },
                order: 1,
                title: "排序算法",
              },
            ],
            title: "数据结构和算法",
            id: "01020120",
          },
          {
            label: "算法题",
            topics: [
              {
                id: "0102012101",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "算法题",
            id: "01020121",
          },
          {
            label: "Node",
            topics: [
              {
                id: "0102012201",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "特点：",
                    content: ["它是⼀个 Javascript 运⾏环境", "依赖于 Chrome V8 引擎进⾏代码解释", "事件驱动", "非阻塞 I/O", "单进程， 单线程"],
                  },
                  {
                    title: "优点：",
                    content: ["高并发 ( 最重要的优点)"],
                  },
                  {
                    title: "缺点：",
                    content: ["只⽀持单核 CPU ，不能充分利用 CPU", "可靠性低，⼀ 旦代码某个环节崩溃，整个系统都崩溃"],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 1,
                title: "Node的应用场景",
              },
              {
                id: "0102012202",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102012203",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102012204",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102012205",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102012206",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102012207",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102012208",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102012209",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102012210",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020122"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Node",
            id: "01020122",
          },
          {
            label: "Webpack",
            topics: [
              {
                id: "0102012301",
                status: 1,
                cont_type: 3,
                content: [
                  "WebPack 是⼀个模块打包⼯具，你可以使用 WebPack 管理你的模块依赖， 并编绎输出模块们所需的静态文件 。它能够很好地管理 、打包 Web 开发中所用到的 HTML 、Javascript 、 CSS 以及各种静态文件 ( 图片 、字体等)， 让开发过程更加高效 。对于不同类型的资源， webpack 有对应的模块加载器 。 webpack 模块打包器会分析模块间的依赖关系， 最后 生成了优化且合并后的静态资源",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 1,
                title: "谈谈你对webpack的看法",
              },
              {
                id: "0102012302",
                status: 1,
                cont_type: 1,
                content: [
                  "提取第三⽅库或通过引用外部⽂件的⽅式引⼊第三⽅库",
                  "代码压缩插件 UglifyJsPlugin",
                  "服务器启用gzip压缩",
                  "按需加载资源⽂件 require.ensure",
                  "优化 devtool 中的 source-map",
                  "剥离 css ⽂件， 单独打包",
                  "去除不必要插件， 通常就是开发环境与生产环境用同⼀套配置⽂件导致",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 2,
                title: "打包体积 优化思路",
              },
              {
                id: "0102012303",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "开发环境采用增量构建，启用热更新",
                    content: ["开发环境不做无意义的工作如提取 css 计算文件hash等", "配置 devtool", "选择合适的 loader"],
                  },
                  "个别 loader 开启 cache 如 babel-loader",
                  "第三方库采用引⼊方式",
                  "提取公共代码",
                  "优化构建时的搜索路径 指明需要构建目录及不需要构建目录",
                  "模块化引⼊需要的部分",
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 3,
                title: "打包效率",
              },
              {
                id: "0102012304",
                status: 1,
                cont_type: 1,
                content: [
                  "loader 就是⼀个 node 模块， 它输出了⼀个函数 。当某种资源需要用这个loader 转换时， 这个函数会被调用 。并且， 这个函数可以通过提供给它的this 上下文访问 Loader API 。 reverse-txt-loader",
                  {
                    cont_type: 5,
                    content:
                      "// 定义\nmodule.exports = function(src) {\n//src是原文件内容 ( abcde)，下面对内容进行处理， 这里是反转\nvar result = src.split( '').reverse().join( '');\n//返回JavaScript源码，必须是String或者Buffer\n  return \"module.exports = '${result} '\";\n}\n//使用\n{\n  test: /.txt$/,\n  use: [{\n    './path/reverse-txt-loader'\n  }]\n},",
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 4,
                title: "编写⼀个loader",
              },
              {
                id: "0102012305",
                status: 1,
                cont_type: 1,
                content: [
                  {
                    title: "构建优化",
                    content: [
                      "减少编译体积 ContextReplacementPugin 、 IgnorePlugin 、 babel-plugin-import 、 babel-plugin-transform-runtime",
                      "并行编译 happypack 、 thread-loader 、 uglifyjsWebpackPlugin 开启并行",
                      "缓存 cache-loader 、 hard-source-webpack-plugin 、 uglifyjsWebpackPlugin 开启缓存 、 babel-loader 开启缓存",
                      "预编译 dllWebpackPlugin && DllReferencePlugin 、 auto-dll-webapck-plugin",
                    ],
                  },
                  {
                    title: "性能优化",
                    content: [
                      "减少编译体积 Tree-shaking 、 Scope Hositing",
                      "hash 缓存 webpack-md5-plugin",
                      "拆包 splitChunksPlugin 、 import() 、 require.ensure",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 5,
                title: "说⼀下webpack的⼀些plugin ， 怎么使用webpack对项目进行优化",
              },
              {
                id: "0102012306",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102012307",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102012308",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102012309",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102012310",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020123"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Webpack",
            id: "01020123",
          },
          {
            label: "Vite",
            topics: [
              {
                id: "0102012401",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 1,
                title: "",
              },
              {
                id: "0102012402",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102012403",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102012404",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102012405",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102012406",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102012407",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102012408",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102012409",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102012410",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020124"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Vite",
            id: "01020124",
          },
          {
            label: "Gulp",
            topics: [
              {
                id: "0102012501",
                status: 1,
                cont_type: 1,
                content: [
                  "gulp 是前端开发过程中⼀种基于流的代码构建⼯具， 是自动化项目的构建利器；它不仅能对网站资源进行优化， 而且在开发过程中很多重复的任务能够使用正确的⼯具自动完成",
                  "Gulp的核⼼概念：流",
                  "流， 简单来说就是建立在面向对象基础上的⼀种抽象的处理数据的⼯具 。在流中，定义了⼀些处理数据的基本操作， 如读取数据， 写⼊数据等，程序员是对流进⾏所有操作的， 而不用关⼼流的另⼀头数据的真正流向",
                  "gulp正是通过流和代码优于配置的策略来尽量简化任务编写的⼯作",
                  {
                    title: "Gulp的特点：",
                    content: [
                      "易于使用：通过代码优于配置的策略，gulp 让简单的任务简单， 复杂的任务可管理",
                      "构建快速 利用 Node.js 流的威⼒ ，你可以快速构建项目并减少频繁的 IO 操作",
                      "易于学习 通过最少的 API ， 掌握 gulp 毫不费⼒ ，构建⼯作尽在掌握：如同⼀系列流管道",
                    ],
                  },
                ],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 1,
                title: "gulp是什么",
              },
              {
                id: "0102012502",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102012503",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102012504",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102012505",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102012506",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102012507",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102012508",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102012509",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102012510",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {
                  type: ["01020125"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "Gulp",
            id: "01020125",
          },
          {
            label: "基础建设",
            topics: [
              {
                id: "0102012601",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "基础建设",
            id: "01020126",
          },
          {
            label: "微服务",
            topics: [
              {
                id: "0102012701",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "微服务",
            id: "01020127",
          },
          {
            label: "前端性能优化",
            topics: [
              {
                id: "0102012801",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "前端性能优化",
            id: "01020128",
          },
          {
            label: "低代码",
            topics: [
              {
                id: "0102012901",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221993,
                update_time: 1751181221993,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "低代码",
            id: "01020129",
          },
        ],
        title: "夯实基础",
        id: "010201",
      },
      {
        label: "综合分类",
        children: [
          {
            label: "按等级",
            children: [
              {
                label: "初级前端",
                topics: [
                  {
                    id: "010202010101",
                    status: 1,
                    cont_type: 3,
                    content: ["空白内容"],
                    create_time: 1751181221993,
                    update_time: 1751181221993,
                    classify: {},
                    order: 1,
                    title: "空白标题",
                  },
                ],
                title: "初级前端",
                id: "0102020101",
              },
              {
                label: "中级前端",
                topics: [
                  {
                    id: "010202010201",
                    status: 1,
                    cont_type: 3,
                    content: ["空白内容"],
                    create_time: 1751181221993,
                    update_time: 1751181221993,
                    classify: {},
                    order: 1,
                    title: "空白标题",
                  },
                ],
                title: "中级前端",
                id: "0102020102",
              },
              {
                label: "高级前端",
                topics: [
                  {
                    id: "010202010301",
                    status: 1,
                    cont_type: 3,
                    content: ["空白内容"],
                    create_time: 1751181221993,
                    update_time: 1751181221993,
                    classify: {},
                    order: 1,
                    title: "空白标题",
                  },
                ],
                title: "高级前端",
                id: "0102020103",
              },
            ],
            title: "按等级",
            id: "01020201",
          },
          {
            label: "按专项",
            children: [
              {
                label: "构建工具",
                parts: [
                  {
                    label: "Webpack",
                    topics: [
                      {
                        id: "01020202010101",
                        status: 1,
                        cont_type: 3,
                        content: [
                          "WebPack 是⼀个模块打包⼯具，你可以使用 WebPack 管理你的模块依赖， 并编绎输出模块们所需的静态文件 。它能够很好地管理 、打包 Web 开发中所用到的 HTML 、Javascript 、 CSS 以及各种静态文件 ( 图片 、字体等)， 让开发过程更加高效 。对于不同类型的资源， webpack 有对应的模块加载器 。 webpack 模块打包器会分析模块间的依赖关系， 最后 生成了优化且合并后的静态资源",
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 1,
                        title: "谈谈你对webpack的看法",
                      },
                      {
                        id: "01020202010102",
                        status: 1,
                        cont_type: 1,
                        content: [
                          "提取第三⽅库或通过引用外部⽂件的⽅式引⼊第三⽅库",
                          "代码压缩插件 UglifyJsPlugin",
                          "服务器启用gzip压缩",
                          "按需加载资源⽂件 require.ensure",
                          "优化 devtool 中的 source-map",
                          "剥离 css ⽂件， 单独打包",
                          "去除不必要插件， 通常就是开发环境与生产环境用同⼀套配置⽂件导致",
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 2,
                        title: "打包体积 优化思路",
                      },
                      {
                        id: "01020202010103",
                        status: 1,
                        cont_type: 1,
                        content: [
                          {
                            title: "开发环境采用增量构建，启用热更新",
                            content: ["开发环境不做无意义的工作如提取 css 计算文件hash等", "配置 devtool", "选择合适的 loader"],
                          },
                          "个别 loader 开启 cache 如 babel-loader",
                          "第三方库采用引⼊方式",
                          "提取公共代码",
                          "优化构建时的搜索路径 指明需要构建目录及不需要构建目录",
                          "模块化引⼊需要的部分",
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 3,
                        title: "打包效率",
                      },
                      {
                        id: "01020202010104",
                        status: 1,
                        cont_type: 1,
                        content: [
                          "loader 就是⼀个 node 模块， 它输出了⼀个函数 。当某种资源需要用这个loader 转换时， 这个函数会被调用 。并且， 这个函数可以通过提供给它的this 上下文访问 Loader API 。 reverse-txt-loader",
                          {
                            cont_type: 5,
                            content:
                              "// 定义\nmodule.exports = function(src) {\n//src是原文件内容 ( abcde)，下面对内容进行处理， 这里是反转\nvar result = src.split( '').reverse().join( '');\n//返回JavaScript源码，必须是String或者Buffer\n  return \"module.exports = '${result} '\";\n}\n//使用\n{\n  test: /.txt$/,\n  use: [{\n    './path/reverse-txt-loader'\n  }]\n},",
                          },
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 4,
                        title: "编写⼀个loader",
                      },
                      {
                        id: "01020202010105",
                        status: 1,
                        cont_type: 1,
                        content: [
                          {
                            title: "构建优化",
                            content: [
                              "减少编译体积 ContextReplacementPugin 、 IgnorePlugin 、 babel-plugin-import 、 babel-plugin-transform-runtime",
                              "并行编译 happypack 、 thread-loader 、 uglifyjsWebpackPlugin 开启并行",
                              "缓存 cache-loader 、 hard-source-webpack-plugin 、 uglifyjsWebpackPlugin 开启缓存 、 babel-loader 开启缓存",
                              "预编译 dllWebpackPlugin && DllReferencePlugin 、 auto-dll-webapck-plugin",
                            ],
                          },
                          {
                            title: "性能优化",
                            content: [
                              "减少编译体积 Tree-shaking 、 Scope Hositing",
                              "hash 缓存 webpack-md5-plugin",
                              "拆包 splitChunksPlugin 、 import() 、 require.ensure",
                            ],
                          },
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 5,
                        title: "说⼀下webpack的⼀些plugin ， 怎么使用webpack对项目进行优化",
                      },
                      {
                        id: "01020202010106",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 6,
                        title: "",
                      },
                      {
                        id: "01020202010107",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 7,
                        title: "",
                      },
                      {
                        id: "01020202010108",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 8,
                        title: "",
                      },
                      {
                        id: "01020202010109",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 9,
                        title: "",
                      },
                      {
                        id: "01020202010110",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020101"],
                        },
                        order: 10,
                        title: "",
                      },
                    ],
                    title: "Webpack",
                    id: "010202020101",
                  },
                  {
                    label: "Vite",
                    topics: [
                      {
                        id: "01020202010201",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 1,
                        title: "",
                      },
                      {
                        id: "01020202010202",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 2,
                        title: "",
                      },
                      {
                        id: "01020202010203",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 3,
                        title: "",
                      },
                      {
                        id: "01020202010204",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 4,
                        title: "",
                      },
                      {
                        id: "01020202010205",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 5,
                        title: "",
                      },
                      {
                        id: "01020202010206",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 6,
                        title: "",
                      },
                      {
                        id: "01020202010207",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 7,
                        title: "",
                      },
                      {
                        id: "01020202010208",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 8,
                        title: "",
                      },
                      {
                        id: "01020202010209",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 9,
                        title: "",
                      },
                      {
                        id: "01020202010210",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020102"],
                        },
                        order: 10,
                        title: "",
                      },
                    ],
                    title: "Vite",
                    id: "010202020102",
                  },
                  {
                    label: "Gulp",
                    topics: [
                      {
                        id: "01020202010301",
                        status: 1,
                        cont_type: 1,
                        content: [
                          "gulp 是前端开发过程中⼀种基于流的代码构建⼯具， 是自动化项目的构建利器；它不仅能对网站资源进行优化， 而且在开发过程中很多重复的任务能够使用正确的⼯具自动完成",
                          "Gulp的核⼼概念：流",
                          "流， 简单来说就是建立在面向对象基础上的⼀种抽象的处理数据的⼯具 。在流中，定义了⼀些处理数据的基本操作， 如读取数据， 写⼊数据等，程序员是对流进⾏所有操作的， 而不用关⼼流的另⼀头数据的真正流向",
                          "gulp正是通过流和代码优于配置的策略来尽量简化任务编写的⼯作",
                          {
                            title: "Gulp的特点：",
                            content: [
                              "易于使用：通过代码优于配置的策略，gulp 让简单的任务简单， 复杂的任务可管理",
                              "构建快速 利用 Node.js 流的威⼒ ，你可以快速构建项目并减少频繁的 IO 操作",
                              "易于学习 通过最少的 API ， 掌握 gulp 毫不费⼒ ，构建⼯作尽在掌握：如同⼀系列流管道",
                            ],
                          },
                        ],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 1,
                        title: "gulp是什么",
                      },
                      {
                        id: "01020202010302",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 2,
                        title: "",
                      },
                      {
                        id: "01020202010303",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 3,
                        title: "",
                      },
                      {
                        id: "01020202010304",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 4,
                        title: "",
                      },
                      {
                        id: "01020202010305",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 5,
                        title: "",
                      },
                      {
                        id: "01020202010306",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 6,
                        title: "",
                      },
                      {
                        id: "01020202010307",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 7,
                        title: "",
                      },
                      {
                        id: "01020202010308",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 8,
                        title: "",
                      },
                      {
                        id: "01020202010309",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 9,
                        title: "",
                      },
                      {
                        id: "01020202010310",
                        status: 1,
                        cont_type: 3,
                        content: ["待完善"],
                        create_time: 1751181221994,
                        update_time: 1751181221994,
                        classify: {
                          type: ["010202020103"],
                        },
                        order: 10,
                        title: "",
                      },
                    ],
                    title: "Gulp",
                    id: "010202020103",
                  },
                ],
                title: "构建工具",
                id: "0102020201",
                topics: [
                  {
                    id: "010202020101",
                    status: 1,
                    cont_type: 3,
                    content: ["空白内容"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {},
                    order: 1,
                    title: "空白标题",
                  },
                ],
              },
              {
                label: "性能优化",
                topics: [
                  {
                    id: "010202020201",
                    status: 1,
                    cont_type: 3,
                    content: ["空白内容"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {},
                    order: 1,
                    title: "空白标题",
                  },
                ],
                title: "性能优化",
                id: "0102020202",
              },
            ],
            title: "按专项",
            id: "01020202",
          },
          {
            label: "前端资料大全",
            parts: [
              {
                label: "HTML",
                topics: [
                  {
                    id: "010202030101",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减小， title值强调重点即可， 重要关键词出现不要超过2次， 而且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容高度概括， ⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可",
                      [
                        "语义化的 HTML 代码，符合W3C规范：语义化代码让",
                        {
                          content: "搜索引擎",
                          explain: "这是对搜索引擎的解释内容",
                        },
                        "容易理解网⻚",
                      ],
                      "重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下， 有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取",
                      "重要内容不要用 js 输出：爬虫不会执⾏js获取内容",
                      [
                        {
                          levels: {
                            1: 5,
                          },
                          content: "少用 iframe ：搜索引擎不会抓取 iframe 中的内容",
                        },
                      ],
                      [
                        {
                          content: "⾮装饰性图片必须加 alt",
                          levels: {
                            3: 5,
                          },
                        },
                      ],
                      [
                        {
                          content: "提高网站速度： 网站速度是搜索引擎排序的⼀个重要指标",
                          levels: {
                            3: 5,
                          },
                        },
                      ],
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 1,
                    title: [
                      {
                        content: "前端需要注意哪些SEO优化？",
                        levels: {
                          2: 5,
                          3: 5,
                          4: 5,
                          5: 5,
                          6: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030102",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "通常当鼠标滑动到元素上的时候显示",
                      "alt 是 <img/> 的特有属性， 是图片内容的等价描述，用于图片⽆法加载时显示 、读屏器阅读图片 。可提图片高可访问性， 除了纯装饰图片外都必须设置有意义的值， 搜索引擎会重点分析。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 2,
                    title: "<img> 的 title 和 alt 有什么区别",
                  },
                  {
                    id: "010202030103",
                    status: 1,
                    cont_type: 1,
                    content: [
                      [
                        {
                          content: "GET：发送⼀个请求来取得服务器上的某⼀资源",
                          levels: {
                            3: 1,
                          },
                        },
                      ],
                      [
                        {
                          content: "POST：向 URL 指定的资源提交数据或附加新的数据",
                          levels: {
                            3: 2,
                          },
                        },
                      ],
                      [
                        {
                          content:
                            "PUT：跟 POST ⽅法很像，也是想服务器提交数据 。但是， 它们之间有不同 。 PUT 指定了资源在服务器上的位置， 而 POST 没有",
                          levels: {
                            3: 3,
                          },
                        },
                      ],
                      [
                        {
                          content: "HEAD：只请求页面的首部",
                          levels: {
                            3: 4,
                          },
                        },
                      ],
                      [
                        {
                          content: "DELETE：删除服务器上的某资源",
                          levels: {
                            3: 5,
                          },
                        },
                      ],
                      "OPTIONS：它用于获取当前 URL 所⽀持的⽅法 。如果请求成功，会有⼀个 Allow 的头包含类似 “GET,POST” 这样的信息",
                      "TRACE：被用于激发⼀个远程的，应用层的请求消息回路",
                      "CONNECT：把请求连接转换到透明的 TCP/IP 通道",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 3,
                    title: "HTTP的几种请求方法用途",
                  },
                  {
                    id: "010202030104",
                    status: 1,
                    cont_type: 4,
                    content: [
                      {
                        title: "简单版",
                        content: [
                          "浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ， 向服务器发起请求；",
                          "服务器交给后台处理完成后返回数据， 浏览器接收⽂件 ( HTML、JS、CSS 、图象等)；",
                          "浏览器对加载到的资源 ( HTML、JS、CSS 等) 进行语法解析， 建立相应的内部数据结构( 如 HTML 的 DOM )；",
                          "载⼊解析到的资源⽂件， 渲染页面， 完成。",
                        ],
                      },
                      {
                        title: "详细版",
                        content: [
                          "在浏览器地址栏输⼊URL",
                          {
                            title: "浏览器查看缓存， 如果请求资源在缓存中并且新鲜，跳转到转码步骤",
                            content: [
                              "如果资源未缓存，发起新请求",
                              "如果已缓存，检验是否足够新鲜， 足够新鲜直接提供给客户端， 否则与服务器进行验证。",
                              {
                                title: "检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control ：",
                                content: [
                                  "HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期",
                                  "HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间",
                                ],
                              },
                            ],
                          },
                          "浏览器解析URL获取协议， 主机，端⼝ ， path",
                          "浏览器组装⼀个HTTP ( GET) 请求报文",
                          {
                            title: "浏览器获取主机ip地址， 过程如下：",
                            content: [
                              "浏览器缓存",
                              "本机缓存",
                              "hosts⽂件",
                              "路由器缓存",
                              "ISP DNS缓存",
                              "DNS递归查询 ( 可能存在负载均衡导致每次IP不⼀样)",
                            ],
                          },
                          {
                            title: "打开⼀个socket与目标IP地址，端口建立TCP链接，三次握手如下：",
                            content: [
                              "客户端发送⼀个TCP的SYN=1，Seq=X的包到服务器端⼝",
                              "服务器发回SYN=1， ACK=X+1， Seq=Y的响应包",
                              "客户端发送ACK=Y+1， Seq=Z",
                            ],
                          },
                          "TCP链接建立后发送HTTP请求",
                          "服务器接受请求并解析，将请求转发到服务程序， 如虚拟主机使用工TTP 工ost头部判断请求的服务程序",
                          "服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜， 返回304等对应状态码",
                          "处理程序读取完整请求并准备工TTP响应， 可能需要查询数据库等操作",
                          "服务器将响应报文通过TCP连接发送回浏览器",
                          {
                            title: "浏览器接收工TTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：",
                            content: [
                              "主动⽅发送Fin=1， Ack=Z， Seq= X报⽂",
                              "被动⽅发送ACK=X+1， Seq=Z报⽂",
                              "被动⽅发送Fin=1， ACK=X， Seq=Y报⽂",
                              "主动⽅发送ACK=Y， Seq=X报⽂",
                            ],
                          },
                          "浏览器检查响应状态吗：是否为1XX， 3XX， 4XX， 5XX， 这些情况处理与2XX不同",
                          "如果资源可缓存， 进行缓存",
                          "对响应进⾏解码 (例如gzip压缩)",
                          "根据资源类型决定如何处理 (假设资源为工TML⽂档)",
                          {
                            title:
                              "解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本， 这些操作没有严格的先后顺序， 以下分别解释构建DOM树：",
                            content: [
                              "Tokenizing：根据工TML规范将字符流解析为标记",
                              "Lexing：词法分析将标记转换为对象并定义属性和规则",
                              "DOM construction：根据工TML标记关系将对象组成DOM树",
                            ],
                          },
                          "解析过程中遇到图片 、样式表 、js⽂件，启动下载",
                          {
                            title: "构建CSSOM树：",
                            content: ["Tokenizing：字符流转换为标记流", "Node：根据标记创建节点", "CSSOM：节点创建CSSOM树"],
                          },
                          {
                            title: "根据DOM树和CSSOM树构建渲染树 :",
                            content: [
                              "从DOM树的根节点遍历所有可见节点，不可⻅节点包括：1) script , meta 这样本身不可⻅的标签 。2)被css隐藏的节点， 如 display: none",
                              "对每⼀个可⻅节点，找到恰当的CSSOM规则并应用",
                              "发布可视节点的内容和计算样式",
                            ],
                          },
                          {
                            title: "js解析如下：",
                            content: [
                              "浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading",
                              "HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执⾏⾏内或外部脚本 。这些脚本会同步执⾏， 并且在脚本下载和执⾏时解析器会暂停 。这样就可以用document.write()把文本插⼊到输⼊流中 。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容",
                              "当解析器遇到设置了async属性的script时， 开始下载脚本并继续解析文档 。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载 。异步脚本禁止使用document.write()， 它们可以访问自⼰script和之前的文档元素",
                              "当文档完成解析，document.readState变成interactive",
                              "所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树， 禁止使用document.write()",
                              "浏览器在Document对象上触发DOMContentLoaded事件",
                              "此时文档完全解析完成， 浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件",
                            ],
                          },
                          "显示页面 ( HTML解析过程中会逐步显示页面)",
                        ],
                      },
                      {
                        title: "详简版",
                        content: [
                          "从浏览器接收 url 到开启⽹络请求线程 ( 这⼀部分可以展开浏览器的机制以及进程与线程之间的关系)",
                          "开启⽹络线程到发出⼀个完整的 HTTP 请求 ( 这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识)",
                          "从服务器接收到请求到对应后台接收到请求 ( 这⼀部分可能涉及到负载均衡， 安全拦截以及后台内部的处理等等)",
                          "后台和前台的 HTTP 交互 ( 这⼀部分包括 HTTP 头部 、响应码 、报文结构 、 cookie 等知识， 可以提下静态资源的 cookie 优化， 以及编码解码， 如 gzip 压缩等)",
                          "单独拎出来的缓存问题， HTTP 的缓存 ( 这部分包括http缓存头部， ETag ， catch-control 等)",
                          "浏览器接收到 HTTP 数据包后的解析流程 ( 解析 html -词法分析然后解析成 dom 树 、解析 css 生成 css 规则树 、合并成 render 树，然后 layout 、 painting 渲染 、复合图层的合成 、 GPU 绘制 、外链资源的处理 、 loaded 和 DOMContentLoaded 等)",
                          "CSS 的可视化格式模型 ( 元素的渲染规则， 如包含块，控制框， BFC ， IFC 等概念)",
                          "JS 引擎解析过程 ( JS 的解释阶段，预处理阶段，执⾏阶段生成执⾏上下文， VO ，作用域链 、回收机制等等)",
                          "其它 ( 可以拓展不同的知识模块， 如跨域，web安全， hybrid 模式等等内容)",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 4,
                    title: "从浏览器地址栏输入url到显示页面的步骤",
                  },
                  {
                    id: "010202030105",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "content 方面",
                        content: [
                          "减少 HTTP 请求：合并文件 、 CSS 精灵 、 inline Image",
                          "减少 DNS 查询： DNS 缓存 、将资源分布到恰当数量的主机名",
                          "减少 DOM 元素数量",
                        ],
                      },
                      {
                        title: "Server 方面",
                        content: ["使用 CDN", "配置 ETag", "对组件使用 Gzip 压缩"],
                      },
                      {
                        title: "Cookie 方面",
                        content: ["减⼩ cookie 大⼩"],
                      },
                      {
                        title: "css 方面",
                        content: ["将样式表放到页面顶部", "不使用 CSS 表达式", "使用 <link> 不使用 @import"],
                      },
                      {
                        title: "Javascript 方面",
                        content: [
                          "将脚本放到页面底部",
                          "将 javascript 和 css 从外部引⼊",
                          "压缩 javascript 和 css",
                          "删除不需要的脚本",
                          "减少 DOM 访问",
                        ],
                      },
                      {
                        title: "图片⽅面",
                        content: ["优化图片：根据实际颜色需要选择色深 、压缩", "优化 css 精灵", "不要在 HTML 中拉伸图片"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 5,
                    title: [
                      {
                        content: "如何进行网站性能优化",
                        levels: {
                          1: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030106",
                    status: 1,
                    cont_type: 0,
                    content: [
                      {
                        title: "1XX ：信息状态码",
                        content: [
                          "100 Continue 继续，⼀ 般在发送 post 请求时， 已发送了 http header 之后服务端将返回此信息，表示确认， 之后发送具体参数信息",
                        ],
                      },
                      {
                        title: "2XX ：成功状态码",
                        content: ["200 OK 正常返回信息", "201 Created 请求成功并且服务器创建了新的资源", "202 Accepted 服务器已接受请求，但尚未处理"],
                      },
                      {
                        title: "3XX ：重定向",
                        content: [
                          "301 Moved Permanently 请求的网页已永久移动到新位置。",
                          "302 Found 临时性重定向。",
                          "303 See Other 临时性重定向，且总是使用 GET 请求新的 URI 。",
                          "304 Not Modified 自从上次请求后，请求的网页未修改过。",
                        ],
                      },
                      {
                        title: "4XX ：客户端错误",
                        content: [
                          "400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。",
                          "401 Unauthorized 请求未授权。",
                          "403 Forbidden 禁止访问。",
                          "404 Not Found 找不到如何与 URI 相匹配的资源。",
                        ],
                      },
                      {
                        title: "5XX: 服务器错误",
                        content: [
                          "500 Internal Server Error 最常⻅的服务器端错误。",
                          "503 Service Unavailable 服务器端暂时⽆法处理请求 ( 可能是过载或维护) 。",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 6,
                    title: [
                      {
                        content: "HTTP状态码及其含义",
                        levels: {
                          2: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030107",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "用正确的标签做正确的事情！",
                      "HTML 语义化就是让页面的内容结构化，便于对浏览器 、搜索引擎解析；",
                      "在没有样式 CSS 情况下也以⼀种⽂档格式显示， 并且是容易阅读的。",
                      "搜索引擎的爬虫依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。",
                      "使阅读源代码的⼈对网站更容易将网站分块，便于阅读维护理解",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 7,
                    title: [
                      {
                        content: "语义化的理解",
                        levels: {
                          3: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030108",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "主要分成两部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎",
                      "渲染引擎：负责取得网页的内容 ( HTML 、 XML 、图像等等) 、整理讯息 (例如加⼊CSS 等)， 以及计算网页的显示⽅式，然后会输出至显示器或打印机 。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同 。所有网页浏览器 、电子邮件客户端以及其它需要编辑 、显示网络内容的应用程序都需要内核",
                      "JS 引擎则：解析和执⾏ javascript 来实现网页的动态效果",
                      "最开始渲染引擎和 JS 引擎并没有区分的很明确，后来JS引擎越来越独立， 内核就倾向于只指渲染引擎",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 8,
                    title: [
                      {
                        content: "介绍⼀下你对浏览器内核的理解？",
                        levels: {
                          4: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030109",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "HTML5 现在已经不是 SGML 的子集， 主要是关于图像，位置，存储， 多任务等功能的增加",
                        content: [
                          "绘画 canvas",
                          "用于媒介回放的 video 和 audio 元素",
                          "本地离线存储 localStorage 长期存储数据， 浏览器关闭后数据不丢失",
                          "sessionStorage 的数据在浏览器关闭后自动删除",
                          "语意化更好的内容元素， 比如 article 、 footer 、 header 、 nav 、 section",
                          "表单控件， calendar 、 date 、 time 、 email 、 url 、 search",
                          "新的技术 webworker 、 websocket 、 Geolocation",
                        ],
                      },
                      {
                        title: "移除的元素：",
                        content: [
                          "纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、",
                          "对可用性产生负面影响的元素： frame 、 frameset 、 noframes",
                        ],
                      },
                      {
                        title: "⽀持 HTML5 新标签：",
                        content: [
                          "IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产生的标签",
                          "可以利用这⼀特性让这些浏览器⽀持 HTML5 新标签",
                          "浏览器⽀持新标签后， 还需要添加标签默认的样式",
                        ],
                      },
                      "当然也可以直接使用成熟的框架 、比如 html5shim",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 9,
                    title: [
                      {
                        content: "html5有哪些新特性、移除了那些元素？",
                        levels: {
                          5: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030110",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "在用户没有与因特网连接时， 可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件",
                      "原理： HTML5 的离线存储是基于⼀个新建的 .appcache 文件的缓存机制(不是存储技术)， 通过这个文件上的解析清单离线存储资源， 这些资源就会像 cookie ⼀样被存储了下来 。之后当网络在处于离线状态下时， 浏览器会通过被离线存储的数据进行页面展示",
                      {
                        title: "如何使用：",
                        content: [
                          "页面头部像下面⼀样加入⼀个 manifest 的属性；",
                          "在 cache.manifest 文件的编写离线存储的资源",
                          "在离线状态时， 操作 window.applicationCache 进行需求实现",
                          {
                            title: "",
                            cont_type: 5,
                            content:
                              "\nCACHE MANIFEST\n#v0.11\nCACHE:\njs/app.js\ncss/style.css\nNETWORK:\nresourse/logo.png\nFALLBACK:\n/offline.html",
                          },
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 10,
                    title: [
                      {
                        content: "HTML5 的离线储存怎么使用， 工作原理能不能解释⼀下？",
                        levels: {
                          6: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030111",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "在线的情况下， 浏览器发现 html 头部有 manifest 属性， 它会请求 manifest 文件， 如果是第⼀次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储 。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件， 如果文件没有发生改变，就不做任何操作， 如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。",
                      "离线的情况下， 浏览器就直接使用离线存储的资源。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 11,
                    title: "浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢",
                  },
                  {
                    id: "010202030112",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "cookie 是⽹站为了标示用户身份而储存在用户本地终端 ( Client Side)上的数据 ( 通常经过加密)",
                      "cookie数据始终在同源的http请求中携带 ( 即使不需要)， 记会在浏览器和服务器间来回传递",
                      "sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存",
                      {
                        title: "存储⼤小：",
                        content: [
                          "cookie 数据⼤小不能超过4k",
                          "sessionStorage 和 localStorage 虽然也有存储⼤小的限制，但比 cookie ⼤得多， 可以达到5M或更⼤",
                        ],
                      },
                      {
                        title: "有效时间：",
                        content: [
                          "localStorage 存储持久数据， 浏览器关闭后数据不丢失除⾮主动删除数据",
                          "sessionStorage 数据在当前浏览器窗⼝关闭后自动删除",
                          "cookie 设置的 cookie 过期时间之前⼀直有效， 即使窗⼝或浏览器关闭",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 12,
                    title: "请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？",
                  },
                  {
                    id: "010202030113",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "iframe 会阻塞主⻚⾯的 Onload 事件",
                      "搜索引擎的检索程序无法解读这种⻚⾯，不利于 SEO",
                      "iframe 和主⻚⾯共享连接池， 而浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载",
                      "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript 动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 13,
                    title: "iframe有那些缺点？",
                  },
                  {
                    id: "010202030114",
                    status: 1,
                    cont_type: 3,
                    content: ["标签闭合 、标签小写 、不乱嵌套 、使用外链 css 和 js 、结构⾏为表现的分离"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 14,
                    title: "WEB标准以及W3C标准是什么?",
                  },
                  {
                    id: "010202030115",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "⼀个是功能上的差别",
                        content: ["主要是 XHTML 可兼容各⼤浏览器 、手机以及 PDA ， 并且浏览器也能快速正确地编译⽹⻚"],
                      },
                      {
                        title: "另外是书写习惯的差别",
                        content: ["XHTML 元素必须被正确地嵌套， 闭合， 区分大⼩写，文档必须拥有根元素"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 15,
                    title: "xhtml和html有什么区别?",
                  },
                  {
                    id: "010202030116",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "页面被加载的时， link 会同时被加载， 而 @imort 页面被加载的时， link 会同时被加载， 而 @import 引用的 CSS 会等到页面被加载完再加载 import 只在 IE5 以上才能识别， 而 link 是 XHTML 标签， 无兼容问题 link 方式的样式的权重 高于 @import 的权重",
                      "<!DOCTYPE> 声明位于文档中的最前面， 处于 <html> 标签之前 。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档",
                      "严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运⾏",
                      "在混杂模式中， 页面以宽松的向后兼容的方式显示 。模拟老式浏览器的⾏为以防止站点无法⼯作 。 DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 16,
                    title: "Doctype作用? 严格模式与混杂模式如何区分？ 它们有何意义?",
                  },
                  {
                    id: "010202030117",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "⾏内元素有： a b span img input select strong",
                      "块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p",
                      "空元素： <br> <hr> <img> <input> <link> <meta>",
                      "⾏内元素不可以设置宽高，不独占⼀⾏",
                      "块级元素可以设置宽高， 独占⼀⾏",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 17,
                    title: "行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？",
                  },
                  {
                    id: "010202030118",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "class :为元素设置类标识",
                      "data-* : 为元素增加自定义属性",
                      "draggable : 设置元素是否可拖拽",
                      "id : 元素 id ，文档内唯⼀",
                      "lang : 元素内容的的语⾔",
                      "style : ⾏内 css 样式",
                      "title : 元素相关的建议信息",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 18,
                    title: "HTML全局属性(global attribute)有哪些",
                  },
                  {
                    id: "010202030119",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "svg 绘制出来的每⼀个图形的元素都是独立的 DOM 节点， 能够方便的绑定事件或用来修改 。 canvas 输出的是⼀整幅画布",
                      "svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩⼩，不会失真和锯齿 。而canvas 输出标量画布，就像⼀张图片⼀样，放大会失真或者锯齿",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 19,
                    title: "Canvas和SVG有什么区别？",
                  },
                  {
                    id: "010202030120",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "HTML5 不基于 SGML ， 因此不需要对 DTD 进⾏引用，但是需要 doctype 来规范浏览器的⾏为",
                      "而 HTML4.01 基于 SGML ,所以需要对类型",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 20,
                    title: "HTML5 为什么只需要写 <!DOCTYPE HTML>",
                  },
                  {
                    id: "010202030121",
                    status: 1,
                    cont_type: 1,
                    content: ["svg", "border-radius", "纯 js 实现 需要求⼀个点在不在圆上简单算法 、获取鼠标坐标等等"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 21,
                    title: "如何在页面上实现⼀个圆形的可点击区域？",
                  },
                  {
                    id: "010202030122",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "区分用户是计算机还是⼈的公共全自动程序 。可以防止恶意破解密码 、刷票 、论坛灌水",
                      "有效防止黑客对某⼀个特定注册用户用特定程序暴⼒破解方式进⾏不断的登陆尝试",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 22,
                    title: "网页验证码是干嘛的， 是为了解决什么安全问题",
                  },
                  {
                    id: "010202030123",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "meta 属性",
                        cont_type: 5,
                        content:
                          '// 此处待完善，待重新编辑\nname="viewport"\ncontent="width=device-width"\ninitial-scale="1.0"\n// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’\n// device-width 设备宽度\n// height 设置viewport高度，⼀ 般设置了宽度，会自动解析出高度，可以不用设置\n// initial-scale 默认缩放比例 (初始缩放比例)， 为⼀个数字，可以带⼩数\n// minimum-scale 允许用户最⼩缩放比例，为⼀个数字，可以带⼩数\n// maximum-scale 允许用户最大缩放比例，为⼀个数字，可以带⼩数\n// user-scalable 是否允许手动缩放',
                      },
                      {
                        title: "延伸提问",
                        content: ["怎样处理 移动端 1px 被 渲染成 2px 问题"],
                      },
                      {
                        title: "局部处理",
                        content: [
                          "mate 标签中的 viewport 属性 ，initial-scale设置为 1",
                          "rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩⼩⼀倍即可；",
                        ],
                      },
                      {
                        title: "全局处理",
                        content: ["mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5", "rem 按照设计稿标准走即可"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 23,
                    title: "viewport",
                  },
                  {
                    id: "010202030124",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "禁止使用 iframe ( 阻塞父⽂档 onload 事件)",
                        content: [
                          "iframe 会阻塞主页面的 Onload 事件",
                          "搜索引擎的检索程序⽆法解读这种页面，不利于SEO",
                          "iframe 和主页面共享连接池， 而浏览器对相同域的连接有限制，所以会影响页面的并行加载",
                          "使用 iframe 之前需要考虑这两个缺点 。如果需要使用 iframe ， 最好是通过javascript",
                          "动态给 iframe 添加 src 属性值， 这样可以绕开以上两个问题",
                        ],
                      },
                      "禁止使用 gif 图片实现 loading 效果 ( 降低 CPU 消耗，提升渲染性能)",
                      "使用 CSS3 代码代替 JS 动画 (尽可能避免重绘重排以及回流)",
                      {
                        title: "对于⼀些⼩图标， 可以使用base64位编码， 以减少⽹络请求 。但不建议大图使用， 比较耗费 CPU，⼩图标优势在于",
                        content: ["减少 HTTP 请求", "避免⽂件跨域", "修改及时生效"],
                      },
                      "页面头部的 <style></style> <script></script> 会阻塞页面；( 因为 Renderer进程中 JS 线程和渲染线程是互斥的)",
                      "页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)",
                      "⽹页 gzip ， CDN 托管， data 缓存 ， 图片服务器",
                      "前端模板 1S+数据，减少由于 HTML 标签导致的带宽浪费， 前端用变量保存A1AX请求结果，每次操作本地变量，不用请求，减少请求次数",
                      "用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能",
                      "当需要设置的样式很多时设置 className 而不是直接操作 style",
                      "少用全局变量 、缓存 DOM 节点查找的结果 。减少 IO 读取操作",
                      "图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳",
                      "对普通的网站有⼀个统⼀的思路，就是尽量向前端优化 、减少数据库操作 、减少磁盘 IO",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 24,
                    title: "渲染优化",
                  },
                  {
                    id: "010202030125",
                    status: 1,
                    cont_type: 5,
                    content: [
                      '<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大⼩写-->\n<head lang="en"> <!--标准的 lang 属性写法-->\n<meta charset= ’utf-8′> <!--声明文档使用的字符编码-->\n<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!--优先使\n<meta name= "description" content="不超过150个字符"/> <!--页面描述-->\n<meta name= "keywords" content="/> <!-- 页面关键词-->\n<meta name= "author" content= "name, email@gmail .com"/> <!--网页作者-->\n<meta name= "robots" content= "index,follow"/> <!--搜索引擎抓取-->\n<meta name= "viewport" content="initial-scale=1, maximum- scale=3, minimum-sc\n<meta name= "apple-mobile-web-app-title" content="标题"> <!--iOS 设备 begin-- <meta name= "apple-mobile-web-app-capable" content= "yes"/> <!--添加到主屏后的标是否启用 WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->\n< meta name= "apple- itunes- app" content=" app- id=myAppStoreID, affiliate-data=\n<!--添加智能 App ⼴告条 Smart App Banner ( iOS 6+ Safari) -->\n<meta name= "apple-mobile-web-app-status-bar-style" content= "black"/>\n<meta name= "format-detection" content="telphone=no, email=no"/> <!--设置苹果\n<meta name= "renderer" content= "webkit"> <!-- 启用360浏览器的极速模式(webkit)-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--避免IE使用兼容模\n<meta http-equiv= "Cache-Control" content="no-siteapp" /> <!--不让百度转码- <meta name= "HandheldFriendly" content= "true"> <!--针对手持设备优化，主要是针\n<meta name= "MobileOptimized" content= "320"> <!--微软的老式浏览器-->\n<meta name= "screen-orientation" content= "portrait"> <!--uc强制竖屏-->\n<meta name= "x5-orientation" content= "portrait"> <!--QQ强制竖屏-->\n<meta name= "full-screen" content="yes"> <!--UC强制全屏-->\n<meta name= "x5-fullscreen" content= "true"> <!--QQ强制全屏-->\n<meta name= "browsermode" content= "application"> <!--UC应用模式-->\n<meta name= "x5-page-mode" content="app"> <!-- QQ应用模式-->\n<meta name= "msapplication-tap-highlight" content="no"> <!--windows phone置页面不缓存-->\n<meta http-equiv="pragma" content="no-cache">\n<meta http-equiv= "cache-control" content="no-cache">\n<meta http-equiv= "expires" content="0">',
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 25,
                    title: "meta viewport相关",
                  },
                  {
                    id: "010202030126",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "IE : trident 内核",
                      "Firefox ： gecko 内核",
                      "14/115",
                      "2023/4 第⼀部分：基础篇 | EncodeStudio Safari : webkit 内核",
                      "Opera :以前是 presto 内核， Opera 现已改用Google - Chrome 的 Blink 内核",
                      "Chrome:Blink (基于 webkit ， Google与Opera Software共同开发)",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 26,
                    title: "你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?",
                  },
                  {
                    id: "010202030127",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "改版的时候更⽅便 只要改 css ⽂件。",
                      "页面加载速度更快 、结构化清晰 、页面显示简洁。",
                      "表现与结构相分离。",
                      "易于优化 ( seo ) 搜索引擎更友好， 排名更容易靠前。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 27,
                    title: "div+css的布局较table布局有什么优点？",
                  },
                  {
                    id: "010202030128",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "alt(alt text) :为不能显示图像 、窗体或 applets 的用户代理 ( UA )， alt 属性用来指定替换⽂字 。替换⽂字的语⾔由 lang 属性指定 。(在IE浏览器下会在没有 title 时把 alt 当成 tool tip 显示)",
                      "title(tool tip) :该属性为设置该属性的元素提供建议性的信息",
                      "strong :粗体强调标签， 强调，表示内容的重要性",
                      "em :斜体强调标签，更强烈强调，表示内容的强调点",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 28,
                    title: "img的alt与title有何异同？b：strong与em的异同？",
                  },
                  {
                    id: "010202030129",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "渐进增强：针对低版本浏览器进⾏构建页面，保证最基本的功能，然后再针对高级浏览器进⾏效果 、交互等改进和追加功能达到更好的用户体验。",
                      "优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。",
                      {
                        cont_type: 6,
                        content:
                          "区别：优雅降级是从复杂的现状开始， 并试图减少用户体验的供给， 而渐进增强则是从⼀个非常基础的， 能够起作用的版本开始， 并不断扩充， 以适应未来环境的需要 。降级 (功能衰减) 意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 29,
                    title: "你能描述⼀下渐进增强和优雅降级之间的不同吗",
                  },
                  {
                    id: "010202030130",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "CDN 缓存更⽅便",
                      "突破浏览器并发限制",
                      "节约 cookie 带宽",
                      "节约主域名的连接数，优化页面响应速度",
                      "防止不必要的安全问题",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 30,
                    title: "为什么利用多个域名来存储网站资源会更有效？",
                  },
                  {
                    id: "010202030131",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "src 用于替换当前元素， href用于在当前⽂档和引用资源之间确立联系。",
                      "src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到⽂档内，例如 js 脚本，img 图片和 frame 等元素",
                      {
                        cont_type: 6,
                        content:
                          '<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理， 直到将该资源加载 、编译 、执⾏完毕， 图片和框架等元素也如此， 类似于将所指向资源嵌⼊当前标签内 。这也是为什么将js脚本放在底部而不是头部',
                      },
                      "href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置， 建立和当前元素 ( 锚点) 或当前⽂档 (链接) 之间的链接， 如果我们在⽂档中添加",
                      '<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停止对当前⽂档的处理 。这也是为什么建议使用 link ⽅式来加载 css ， 而不是使用 @import ⽅式',
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 31,
                    title: "简述⼀下src与href的区别",
                  },
                  {
                    id: "010202030132",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "png-8 、 png-24 、 jpeg 、 gif 、 svg、Webp、Apng",
                      {
                        cont_type: 6,
                        content: "注意：面试官希望听到是Webp , Apng 。 ( 是否有关注新技术，新鲜事物)",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 32,
                    title: "知道的网页制作会用到的图片格式有哪些？",
                  },
                  {
                    id: "010202030133",
                    status: 1,
                    cont_type: 3,
                    content: ["dns 缓存， cdn 缓存， 浏览器缓存， 服务器缓存"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 33,
                    title: "在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始， ⼀次js请求⼀般情况下有哪些地方会有缓存处理？",
                  },
                  {
                    id: "010202030134",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "图片懒加载，在页面上的未可视区域可以添加⼀个滚动事件， 判断图片位置与浏览器顶端的距离与页面的距离， 如果前者小于后者，优先加载。",
                      "如果为幻灯片 、相册等， 可以使用图片预加载技术，将当前展示图片的前⼀张和后⼀张优先下载。",
                      "如果图片为css图片， 可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。",
                      "如果图片过大， 可以使用特殊编码的图片，加载时会先加载⼀张压缩的特别厉害的缩略图， 以提高用户体验。",
                      "如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示⼀致。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 34,
                    title: "⼀个页面上有大量的图片 (大型电商网站) ，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。",
                  },
                  {
                    id: "010202030135",
                    status: 1,
                    cont_type: 1,
                    content: ["cookie", "session", "url 重写", "隐藏 input", "ip 地址"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 35,
                    title: "web开发中会话跟踪的方法有哪些",
                  },
                  {
                    id: "010202030136",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "attribute 是 dom 元素在文档中作为 html 标签拥有的属性；",
                      "property 就是 dom 元素在 js 中作为对象拥有的属性。",
                      "对于 html 的标准属性来说， attribute 和 property 是同步的， 是会自动更新的",
                      "但是对于自定义的属性来说，他们是不同步的",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020301"],
                    },
                    order: 36,
                    title: "attribute和property的区别是什么",
                  },
                ],
                title: "HTML",
                id: "0102020301",
              },
              {
                label: "CSS",
                topics: [
                  {
                    id: "010202030201",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "概念：将多个小图片拼接到⼀个图片中 。通过 background-position 和元素尺寸调节需要显示的背景图案。",
                      {
                        title: "优点：",
                        content: [
                          "减少 HTTP 请求数，极大地提高页面加载速度",
                          "增加图片信息重复度，提高压缩比，减少图片大小",
                          "更换⻛格⽅便， 只需在⼀张或⼏张图片上修改颜色或样式即可实现",
                        ],
                      },
                      {
                        title: "缺点：",
                        content: ["图片合并麻烦", "维护麻烦，修改⼀个图片可能需要从新布局整个图片，样式"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 1,
                    title: "css sprite是什么,有什么优缺点",
                  },
                  {
                    id: "010202030202",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "联系：它们都能让元素不可⻅",
                      {
                        title: "区别：",
                        content: [
                          "display:none ;会让元素完全从渲染树中消失， 渲染的时候不占据任何空间；visibility: hidden ;不会让元素从渲染树消失， 渲染师元素继续占据空间， 只是内容不可⻅",
                          "display: none ;是⾮继承属性， ⼦孙节点消失由于元素从渲染树消失造成， 通过修改⼦孙节点属性⽆法显示 ；visibility: hidden; 是继承属性， ⼦孙节点消失由于继承了 hidden ， 通过设置 visibility: visible; 可以让⼦孙节点显式",
                          "修改常规流中元素的 display 通常会造成⽂档重排 。修改 visibility 属性只会造成本元素的重绘。",
                          "读屏器不会读取 display: none ;元素内容；会读取 visibility: hidden; 元素内容",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 2,
                    title: "display: none; 与 visibility: hidden; 的区别",
                  },
                  {
                    id: "010202030203",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "link 是 HTML ⽅式， @import 是CSS⽅式",
                      "link 最大限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载， 出现 FOUC (⽂档样式短暂失效)",
                      'link 可以通过 rel="alternate stylesheet" 指定候选样式',
                      "浏览器对 link ⽀持早于 @import ， 可以使用 @import 对老浏览器隐藏样式",
                      "@import 必须在样式规则之前， 可以在css⽂件中引用其他⽂件",
                      "总体来说： link 优于 @import",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 3,
                    title: "link 与 @import 的区别",
                  },
                  {
                    id: "010202030204",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "Flash Of Unstyled Content ：用户定义样式表加载之前浏览器使用默认样式显示⽂档，用户样式加载渲染之后再从新显示⽂档， 造成⻚⾯闪烁。",
                      "解决方法：把样式表放到⽂档的 <head>",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 4,
                    title: "什么是FOUC?如何避免",
                  },
                  {
                    id: "010202030205",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        title: "创建规则：",
                        content: [
                          "根元素",
                          "浮动元素 ( float 不取值为 none )",
                          "绝对定位元素 ( position 取值为 absolute 或 fixed )",
                          "display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、",
                          "inline-flex 之⼀的元素",
                          "overflow 不取值为 visible 的元素",
                        ],
                      },
                      {
                        title: "作用：",
                        content: ["可以包含浮动元素", "不被浮动元素覆盖", "阻止父子元素的 margin 折叠"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 5,
                    title: "如何创建块级格式化上下文(block formatting context),BFC有什么用",
                  },
                  {
                    id: "010202030206",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "如果 display 取值为 none ，那么 position 和 float 都不起作用， 这种情况下元素不产生框",
                      "否则， 如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计算值为 none ， display 根据下面的表格进行调整。",
                      "否则， 如果 float 不是 none ，框是浮动的， display 根据下表进行调整",
                      "否则， 如果元素是根元素， display 根据下表进行调整",
                      "其他情况下 display 的值为指定值",
                      {
                        cont_type: 6,
                        content: "总结起来：绝对定位、浮动、根元素都需要调整 display",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 6,
                    title: "display 、float 、position的关系",
                  },
                  {
                    id: "010202030207",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "父级 div 定义 height",
                      "结尾处加空 div 标签 clear:both",
                      "父级 div 定义伪类 :after 和 zoom",
                      "父级 div 定义 overflow:hidden",
                      "父级 div 也浮动， 需要定义宽度",
                      "结尾处加 br 标签 clear:both",
                      {
                        cont_type: 6,
                        content: "比较好的是第3种方式， 好多网站都这么用",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 7,
                    title: "清除浮动的几种方式，各自的优缺点",
                  },
                  {
                    id: "010202030208",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的， 如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。",
                      "当然，初始化样式会对 SEO 有⼀定的影响，但鱼和熊掌不可兼得，但⼒求影响最⼩的情况下初始化",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 8,
                    title: "为什么要初始化CSS样式?",
                  },
                  {
                    id: "010202030209",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "新增各种 css 选择器",
                      "圆角 border-radius",
                      "多列布局",
                      "阴影和反射",
                      "文字特效 text-shadow",
                      "线性渐变",
                      "旋转 transform",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 9,
                    title: "css3有哪些新特性",
                  },
                  {
                    id: "010202030210",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。",
                      "p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。",
                      "p:only-of-type 选择属于其父元素唯⼀的 <p> 元素的每个 <p> 元素。",
                      "p:only-child 选择属于其父元素的唯⼀⼦元素的每个 <p> 元素。",
                      "p:nth-child(2) 选择属于其父元素的第⼆个⼦元素的每个 <p> 元素。",
                      ":after 在元素之前添加内容,也可以用来做清除浮动。",
                      ":before 在元素之后添加内容。",
                      ":enabled 已启用的表单元素。",
                      ":disabled 已禁用的表单元素。",
                      ":checked 单选框或复选框被选中。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 10,
                    title: "CSS3新增伪类有那些？",
                  },
                  {
                    id: "010202030211",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "block 转换成块状元素。",
                      "inline 转换成行内元素。",
                      "none 设置元素不可见。",
                      "inline-block 象行内元素⼀样显示，但其内容象块类型元素⼀样显示。",
                      "list-item 象块类型元素⼀样显示， 并添加样式列表标记。",
                      "table 此元素会作为块级表格来显示",
                      "inherit 规定应该从父元素继承 display 属性的值",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 11,
                    title: "display有哪些值？说明他们的作用",
                  },
                  {
                    id: "010202030212",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "有两种， IE 盒子模型 、 W3C 盒子模型；",
                      "盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；",
                      "区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 12,
                    title: "介绍⼀下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？",
                  },
                  {
                    id: "010202030213",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "优先级就近原则， 同权重情况下样式定义最近者为准",
                      "载⼊样式以最后载⼊的定位为准",
                      "优先级为: !important > id > class > tag ; !important 比 内联优先级高",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 13,
                    title: "CSS优先级算法如何计算？",
                  },
                  {
                    id: "010202030214",
                    status: 1,
                    cont_type: 3,
                    content: ["它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 14,
                    title: "对BFC规范的理解？",
                  },
                  {
                    id: "010202030215",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "浮动的框可以向左或向右移动， 直到他的外边缘碰到包含框或另⼀个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在⼀样 。浮动的块框会漂浮在文档普通流的块框上",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 15,
                    title: "谈谈浮动和清除浮动",
                  },
                  {
                    id: "010202030216",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "absolute ：生成绝对定位的元素，相对于 static 定位以外的第⼀个父元素进行定位",
                      "fixed ：生成绝对定位的元素，相对于浏览器窗⼝进行定位",
                      "relative ：生成相对定位的元素，相对于其正常位置进行定位",
                      "static 默认值 。没有定位，元素出现在正常的流中",
                      "inherit 规定从父元素继承 position 属性的值",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 16,
                    title: "position的值， relative和absolute定位原点是",
                  },
                  {
                    id: "010202030217",
                    status: 1,
                    cont_type: 1,
                    content: ["移除空格", "设置margin 负值", "设置font-size:0", "letter-spacing", "word-spacing"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 17,
                    title: "display:inline-block 什么时候不会显示间隙？ (携程)",
                  },
                  {
                    id: "010202030218",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        title: "GIF",
                        content: ["8 位像素， 256 色", "无损压缩", "支持简单动画", "支持 boolean 透明", "适合简单动画"],
                      },
                      {
                        title: "JPEG",
                        content: ["颜色限于 256", "有损压缩", "可控制压缩质量", "不支持透明", "适合照片"],
                      },
                      {
                        title: "PNG",
                        content: [
                          "有 PNG8 和 truecolor PNG",
                          "PNG8 类似 GIF 颜色上限为 256 ，文件小， 支持 alpha 透明度， 无动画",
                          "适合图标 、背景 、按钮",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 18,
                    title: "PNG、GIF、JPG的区别及如何选",
                  },
                  {
                    id: "010202030219",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "行内元素设置成浮动之后变得更加像是 inline-block (行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性， 最明显的不同是它的默认宽度不是 100% )， 这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 19,
                    title: "行内元素float:left后是否变为块级元素？",
                  },
                  {
                    id: "010202030220",
                    status: 1,
                    cont_type: 3,
                    content: ["偶数字号相对更容易和 web 设计的其他部分构成比例关系"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 20,
                    title: "在网页中的应该使用奇数还是偶数的字体？为什么呢？",
                  },
                  {
                    id: "010202030221",
                    status: 1,
                    cont_type: 1,
                    content: ["单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素", "用于区分伪类和伪元素"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 21,
                    title: "::before 和 :after中双冒号和单冒号 有什么区别？解释⼀下这2个伪元素的作用",
                  },
                  {
                    id: "010202030222",
                    status: 1,
                    cont_type: 3,
                    content: ["多数显示器默认频率是 60Hz ， 即 1 秒刷新 60 次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 21,
                    title: "如果需要手动写动画，你认为最小时间间隔是多久， 为什么？ ( 阿里)",
                  },
                  {
                    id: "010202030223",
                    status: 1,
                    cont_type: 3,
                    content: ["避免使用 @import 引⼊多个 css 文件， 可以使用 CSS 工具将 CSS 合并为⼀个 CSS 文件，例如使用 SassCompass 等"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 22,
                    title: "CSS合并方法",
                  },
                  {
                    id: "010202030224",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "！ important 规则最重要，大于其它规则",
                      "行内样式规则，加 1000",
                      "对于选择器中给定的各个 ID 属性值，加 100",
                      "对于选择器中给定的各个类属性 、属性选择器或者伪类选择器，加 10",
                      "对于选择其中给定的各个元素标签选择器，加1",
                      "如果权值⼀样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 23,
                    title: "CSS不同选择器的权重(CSS层叠的规则)",
                  },
                  {
                    id: "010202030225",
                    status: 1,
                    cont_type: 3,
                    content: ["position 、 display 、 float 、 width 、 heighttop 、 left 、 right 、"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 24,
                    title: "列出你所知道可以改变页面布局的属性",
                  },
                  {
                    id: "010202030226",
                    status: 1,
                    cont_type: 1,
                    content: ["css 压缩与合并 、 Gzip 压缩", "css 文件放在 head 里 、不要用 @import", "尽量用缩写 、避免用滤镜 、合理使用选择器"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 25,
                    title: "CSS在性能优化方面的实践",
                  },
                  {
                    id: "010202030227",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation",
                      "transition ：定义了元素在变化过程中是怎么样的， 包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。",
                      "transform ：定义元素的变化结果， 包含 rotate 、 scale 、 skew 、 translate 。",
                      "animation ：动画定义了动作的每⼀帧 ( @keyframes ) 有什么效果， 包括 animation-name ， animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 26,
                    title: "CSS3动画 ( 简单动画的实现， 如旋转等)",
                  },
                  {
                    id: "010202030228",
                    status: 1,
                    cont_type: 1,
                    content: ["优点可以加密，减少了 HTTTP 请求", "缺点是需要消耗 CPU 进行编解码"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 27,
                    title: "base64的原理及优缺点",
                  },
                  {
                    id: "010202030229",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "流体布局",
                        cont_type: 5,
                        content:
                          '.left {\n  float: left;\n  width: 100px;\n  height: 200px;\n  background: red;\n}\n.right {\n  float: right;\n  width: 200px;\n  height: 200px;\n  background: blue;\n}\n.main {\n  margin-left: 120px;\n  margin-right: 220px;\n  height: 200px;\n  background: green;\n}\n< div class= "container" >\n  <div class="left"></div>\n  <div class="right"></div>\n  <div class="main"></div>\n</div>',
                      },
                      {
                        title: "圣杯布局",
                        cont_type: 5,
                        content:
                          '.container {\n  margin-left: 120px;\n  margin-right: 220px;\n}\n.main {\n  float: left;\n  width: 100%;\n  height:300px;\n  background: green;\n}\n.left {\n  position: relative;\n  left: -120px;\n  float: left;\n  height: 300px;\n  width: 100px;\n  margin-left: -100%;\n  background: red;\n}\n.right {\n  position: relative;\n  right: -220px;\n  float: right;\n  height: 300px;\n  width: 200px;\n  margin-left: -200px;\n  background: blue;\n}\n<div class="container">\n  <div class="main"></div>\n  <div class="left"></div>\n  <div class="right"></div>\n</div>',
                      },
                      {
                        title: "双飞翼布局",
                        cont_type: 5,
                        content:
                          '.content {\n  float: left;\n  width: 100%;\n}\n.main {\n  height: 200px;\n  margin-left: 110px;\n  margin-right: 220px;\n  background: green;\n}\n.main::after {\n  content: \'\';\n  display: block;\n  font-size:0;\n  height: 0;\n  zoom: 1;\n  clear: both;\n}\n.left {\n  float:left;\n  height: 200px;\n  width: 100px;\n  margin-left: -100%;\n  background: red;\n}\n.right {\n  float: right;\n  height: 200px;\n  width: 200px;\n  margin-left: -200px;\n  background: blue;\n}\n<div class="content">\n  <div class="main"></div>\n</div>\n<div class="left"></div>\n<div class="right"></div>',
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 28,
                    title: "几种常见的CSS布局",
                  },
                  {
                    id: "010202030230",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性",
                      "Scss 和 LESS 语法较为严谨， LESS 要求⼀定要使用大括号“{}”， Scss 和 Stylus 可以通过缩进表示层次与嵌套关系",
                      "Scss 无全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作用域概念",
                      "Sass 是基于 Ruby 语⾔的， 而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 29,
                    title: "stylus/sass/less区别",
                  },
                  {
                    id: "010202030231",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "可以直观的理解为：它就是⼀个平台 。为什么说它是⼀个平台呢？ 因为我们直接用它， 感觉不能⼲什么事情，但是如果让⼀些插件在它上面跑，那么将会很强大",
                      "PostCSS 提供了⼀个解析器， 它能够将 CSS 解析成抽象语法树",
                      "通过在 PostCSS 这个平台上， 我们能够开发⼀些插件，来处理我们的 CSS ， 比如热门的： autoprefixer",
                      "postcss 可以对sass处理过后的 css 再处理 最常⻅的就是 autoprefixer",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 30,
                    title: "postcss的作用",
                  },
                  {
                    id: "010202030232",
                    status: 1,
                    cont_type: 1,
                    content: ["<label> 属性 for 和 id", "隐藏原生的 <input>", ":checked + <label>"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 30,
                    title: "如何美化CheckBox",
                  },
                  {
                    id: "010202030233",
                    status: 1,
                    cont_type: 1,
                    content: ["伪类表状态", "伪元素是真的有元素", "前者单冒号，后者双冒号"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 31,
                    title: "伪类和伪元素的区别",
                  },
                  {
                    id: "010202030234",
                    status: 1,
                    cont_type: 1,
                    content: ["用于减少 HTTP 请求", "适用于小图片", "base64 的体积约为原图的 4/3"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 32,
                    title: "base64 的使用",
                  },
                  {
                    id: "010202030235",
                    status: 1,
                    cont_type: 1,
                    content: ["左侧浮动或者绝对定位，然后右侧 margin 撑开", "使用 <div> 包含，然后靠负 margin 形成 bfc", "使用 flex"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 33,
                    title: "自适应布局思路",
                  },
                  {
                    id: "010202030236",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        cont_type: 5,
                        content:
                          '.ani{\nwidth:480px;\nheight:320px;\nmargin:50px auto;\noverflow: hidden;\nbox-shadow:0 0 5px rgba(0,0,0,1);\nbackground-size: cover;\nbackground-position: center;\n-webkit-animation-name: "loops";\n-webkit-animation-duration: 20s;\n-webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes "loops" {\n  0% {\n    background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6\n  }\n  25% {\n    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1\n  }\n  50% {\n    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937da\n  }\n  75% {\n    background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d375\n  }\n  100% {\n    background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb23\n  }\n}',
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 34,
                    title: "请用CSS写⼀个简单的幻灯片效果页面",
                  },
                  {
                    id: "010202030237",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "外边距重叠就是margin-collapse",
                      "在CSS当中，相邻的两个盒子 ( 可能是兄弟关系也可能是祖先关系) 的外边距可以结合成⼀个单独的外边距 。这种合并外边距的方式被称为折叠， 并且因而所结合成的外边距称为折叠外边距。",
                      {
                        title: "折叠结果遵循下列计算规则：",
                        content: [
                          "两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。",
                          "两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。",
                          "两个外边距⼀正⼀负时，折叠结果是两者的相加的和。",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 35,
                    title: "什么是外边距重叠？重叠的结果是什么？",
                  },
                  {
                    id: "010202030238",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素， 以及元素内的所有内容的透明度，",
                      "而 rgba() 只作用于元素的颜色或其背景色 。 ( 设置 rgba 透明的元素的子元素不会继承透明效果！)",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 36,
                    title: "rgba()和opacity的透明效果有什么不同？",
                  },
                  {
                    id: "010202030239",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "方法⼀： 已知元素的高宽",
                        cont_type: 5,
                        content:
                          "#div1{\n  background-color:#6699FF;\n  width:200px;\n  height:200px;\n  position: absolute; //父元素需要相对定位\n  top: 50%;\n  left: 50%;\n  margin-top:-100px ; //二分之⼀的height，width\n  margin-left: -100px;\n}",
                      },
                      {
                        title: "方法二",
                        cont_type: 5,
                        content:
                          "#div1{\n  width: 200px;\n  height: 200px;\n  background-color: #6699FF;\n  margin:auto;\n  position: absolute; //父元素需要相对定位\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n}",
                      },
                      {
                        title: "如何垂直居中⼀个 <img> ? (用更简便的方法。)",
                        cont_type: 5,
                        content: "/**<img>的容器设置如下**/\n#container {\n  display:table-cell;\n  text-align:center;\n  vertical-align:middle;\n}",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 37,
                    title: "如何垂直居中⼀个浮动元素？",
                  },
                  {
                    id: "010202030240",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "px 和 em 都是长度单位， 区别是， px 的值是固定的，指定是多少就是多少，计算比较容易 。 em 得值不是固定的， 并且 em 会继承父级元素的字体大⼩ 。",
                      "浏览器的默认字体高都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么12px=0.75em , 10px=0.625em 。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 38,
                    title: "px和em的区别",
                  },
                  {
                    id: "010202030241",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "他们是 CSS 预处理器 。他是 CSS 上的⼀种抽象层 。他们是⼀种特殊的语法/语⾔编译成CSS 。",
                      "例如Less是⼀种动态样式语⾔ . 将CSS赋予了动态语⾔的特性， 如变量， 继承， 运算， 函数. LESS 既可以在客户端上运⾏ (支持 IE 6+ , Webkit , Firefox )，也可⼀在服务端运⾏ (借助 Node.js )",
                      {
                        title: "为什么要使用它们？",
                        content: [
                          "结构清晰，便于扩展。",
                          "可以方便地屏蔽浏览器私有语法差异 。这个不用多说， 封装对- 浏览器语法差异的重复处理，减少无意义的机械劳动。",
                          "可以轻松实现多重继承。",
                          "完全兼容 CSS 代码， 可以方便地应用到老项目中 。LESS 只- 是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码⼀同编译",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 39,
                    title: "Sass 、LESS是什么？大家为什么要使用他们？",
                  },
                  {
                    id: "010202030242",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "硬件加速是指通过创建独立的复合图层，让GPU来渲染这个图层，从而提高性能，",
                      "⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ， 为了避免2D动画在 开始和结束的时候的 repaint 操作，⼀ 般使用 tranform:translateZ(0)",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 40,
                    title: "如何使用CSS实现硬件加速？",
                  },
                  {
                    id: "010202030243",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "DOM的变化影响到了元素的⼏何属性 ( 宽高) ,浏览器重新计算元素的⼏何属性， 其他元素的⼏何",
                      "属性和位置也会受到影响， 浏览器需要重新构造渲染树， 这个过程称为重排， 浏览器将受到影响的部分",
                      {
                        title: "重新绘制到屏幕上的过程称为重绘 。引起重排的原因有",
                        content: [
                          "添加或者删除可见的DOM元素，",
                          "元素位置 、尺⼨ 、内容改变，",
                          "浏览器页面初始化，",
                          "浏览器窗⼝尺⼨改变， 重排⼀定重绘， 重绘不⼀定重排，",
                        ],
                      },
                      {
                        title: "减少重绘和重排的方法：",
                        content: [
                          "不在布局信息改变时做 DOM 查询",
                          "使用 cssText 或者 className ⼀次性改变属性",
                          "使用 fragment",
                          "对于多次重排的元素， 如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 51,
                    title: "重绘和回流 ( 重排) 是什么， 如何避免？",
                  },
                  {
                    id: "010202030244",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        cont_type: 5,
                        content:
                          "/** 1 **/\n.wraper {\n  position: relative;\n  .box {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100px;\n    height: 100px;\n    margin: -50px 0 0 -50px;\n  }\n}\n/** 2 **/\n.wraper {\n  position: relative;\n  .box {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n}\n/** 3 **/\n.wraper {\n  .box {\n    display: flex;\n    justify-content:center;\n    align-items: center;\n    height: 100px;\n  }\n}\n/** 4 **/\n.wraper {\n  display: table;\n  .box {\n    display: table-cell;\n    vertical-align: middle;\n  }\n}",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 52,
                    title: "实现已知或者未知宽度的垂直水平居中",
                  },
                  {
                    id: "010202030245",
                    status: 1,
                    cont_type: 3,
                    content: ["transform: scale(0.7);"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 53,
                    title: "如何实现小于12px的字体效果",
                  },
                  {
                    id: "010202030246",
                    status: 1,
                    cont_type: 3,
                    content: ["块级格式化上下文， 是⼀个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020302"],
                    },
                    order: 54,
                    title: "BFC",
                  },
                ],
                title: "CSS",
                id: "0102020302",
              },
              {
                label: "JavaScript",
                topics: [
                  {
                    id: "010202030301",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "认识",
                        content: [
                          [
                            {
                              content: "闭包",
                              levels: {
                                2: 5,
                              },
                            },
                            "就是能够读取其他函数",
                            {
                              content: "内部变量",
                              levels: {
                                3: 1,
                              },
                            },
                            "的",
                            {
                              content: "函数",
                              levels: {
                                5: 5,
                              },
                            },
                          ],
                          [
                            {
                              content: "闭包",
                              levels: {
                                1: 5,
                              },
                            },
                            "就是能够",
                            {
                              content: "读取",
                              levels: {
                                1: 5,
                                3: 2,
                              },
                            },
                            "其他函数",
                            {
                              content: "内部变量",
                              levels: {
                                2: 5,
                                3: 1,
                                5: 4,
                                6: 5,
                              },
                            },
                            "的",
                            {
                              content: "函数",
                              levels: {
                                1: 5,
                                2: 5,
                                3: 5,
                                4: 5,
                                5: 5,
                                6: 5,
                              },
                            },
                          ],
                          [
                            {
                              content: "闭包",
                              explain: "这是对闭包的解释内容",
                            },
                            "是指有权访问另⼀个函数作用域中变量的函数，创建闭包的最常⻅的方式就是在⼀个函数内创建另⼀个函数， 通过另⼀个函数访问这个函数的局部变量,利用闭包可以突破作用链域",
                          ],
                          {
                            title: "闭包的特性：",
                            content: ["函数内再嵌套函数", "内部函数可以引用外层的参数和变量", "参数和变量不会被垃圾回收机制回收"],
                          },
                        ],
                      },
                      {
                        title: "理解",
                        content: [
                          "使用闭包主要是为了设计私有的方法和变量 。闭包的优点是可以避免全局变量的污染， 缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露 。在js中， 函数即闭包， 只有函数才会产生作用域的概念",
                          "闭包 的最大用处有两个，⼀个是可以读取函数内部的变量， 另⼀个就是让这些变量始终保持在内存中",
                          "闭包的另⼀个用处， 是封装对象的私有属性和私有方法",
                          "好处：能够实现封装和缓存等；",
                          "坏处：就是消耗内存 、不正当使用会造成内存溢出的问题",
                        ],
                      },
                      {
                        title: "注意事项",
                        content: [
                          "由于闭包会使得函数中的变量都被保存在内存中， 内存消耗很大，所以不能滥用闭包， 否则会造成网页的性能问题，在IE中可能导致内存泄露",
                          "解决方法是，在退出函数之前，将不使用的局部变量全部删除",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1,
                    title: [
                      "谈谈你对闭包的",
                      {
                        content: "认识",
                        levels: {
                          6: 5,
                        },
                      },
                      "、",
                      {
                        content: "理解",
                        levels: {
                          2: 5,
                        },
                      },
                      "、",
                      {
                        content: "注意事项",
                        levels: {
                          1: 5,
                          3: 5,
                        },
                      },
                    ],
                  },
                  {
                    id: "010202030302",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "作用域链的作用是保证执⾏环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问， 变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的",
                      "简单的说，作用域就是变量与函数的可访问范围， 即作用域控制着变量与函数的可⻅性和生命周期",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2,
                    title: "说说你对作用域链的理解",
                  },
                  {
                    id: "010202030303",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)， 当我们访问⼀个对象的属性时",
                      "如果这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性， 这个prototype ⼜会有自⼰的 prototype ， 于是就这样⼀直找下去，也就是我们平时所说的原型链的概念",
                      "关系： instance.constructor.prototype = instance.__proto__ ",
                      "特点：JavaScript 对象是通过引用来传递的， 我们创建的每个新对象实体中并没有⼀份属于自⼰的原型副本 。当我们修改原型时，与之相关的对象也会继承这⼀改变",
                      "当我们需要⼀个属性的时，有的就会查找他的 Prototype建对象",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 3,
                    title: "JavaScript原型，原型链 ? 有什么特点？",
                  },
                  {
                    id: "010202030304",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "事件代理 ( Event Delegation )， ⼜称之为事件委托 。是 JavaScript 中常用绑定事件的常用技巧 。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务 。事件代理的原理是DOM元素的事件冒泡 。使用事件代理的好处是可以提高性能",
                      "可以大量节省内存占用，减少事件注册， 比如在 table 上代理所有 td 的 click 事件就非常棒",
                      "可以实现当新增子对象时无需再次对其绑定",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 4,
                    title: "请解释什么是事件代理",
                  },
                  {
                    id: "010202030305",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "构造继承",
                      "原型继承",
                      "实例继承",
                      "拷贝继承",
                      {
                        cont_type: 5,
                        content: [
                          "// 原型 prototype 机制或 apply 和 call 方法去实现较简单， 建议使用构造函数与原型混合方式",
                          "function Parent(){",
                          "  this.name = 'wang';",
                          "}",
                          "function Child(){",
                          "  this.age = 28;",
                          "}",
                          "Child.prototype = new Parent(); //继承了Parent，通过原型",
                          {
                            content: "var demo = new Child();",
                            levels: {
                              1: 3,
                              2: 5,
                            },
                          },
                          {
                            content: "alert(demo.age);",
                            levels: {
                              3: 3,
                            },
                          },
                          {
                            content: "alert(demo.name);//得到被继承的属性",
                            levels: {
                              4: 3,
                              5: 5,
                              6: 5,
                            },
                          },
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 5,
                    title: "Javascript如何实现继承？",
                  },
                  {
                    id: "010202030306",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "this 总是指向函数的直接调用者 ( 而非间接调用者)",
                      "如果有 new 关键字， this 指向 new 出来的那个对象",
                      "在事件中， this 指向触发这个事件的对象， 特殊的是，this 总是指向全局对象 Window",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 6,
                    title: "谈谈This对象的理解",
                  },
                  {
                    id: "010202030307",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "W3C 中定义事件的发生经历三个阶段：捕获阶段 ( capturing ) 、 目标阶段( targetin ) 、冒泡阶段 ( bubbling )",
                      "冒泡型事件： 当你使用事件冒泡时， 子级元素先触发， 父级元素后触发",
                      "捕获型事件： 当你使用事件捕获时， 父级元素先触发， 子级元素后触发",
                      "DOM 事件流： 同时支持两种事件模型：捕获型事件和冒泡型事件",
                      "阻止冒泡：在 W3c 中，使用 stopPropagation() 方法；在IE下设置 cancelBubble =true",
                      "阻止捕获：阻止事件的默认行为，例如 click - <a> 后的跳转 。在 W3c 中，使用preventDefault() 方法，在 IE 下设置 window.event.returnValue = false",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 7,
                    title: "事件模型",
                  },
                  {
                    id: "010202030308",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "创建⼀个空对象， 并且 this 变量引用该对象， 同时还继承了该函数的原型",
                      "属性和方法被加⼊到 this 引用的对象中",
                      "新创建的对象由 this 所引用， 并且最后隐式的返回 this",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 8,
                    title: "new操作符具体干了什么呢?",
                  },
                  {
                    id: "010202030309",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "Ajax 的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎)， 通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascrip t来操作 DOM 而更新页面 。使用户操作与服务器响应异步化 。这其中最关键的⼀步就是从服务器获得请求数据",
                      {
                        cont_type: 5,
                        content: "//代码待完善",
                      },
                      "Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核⼼机制",
                      {
                        cont_type: 5,
                        content:
                          "/** 1. 创建连接 **/\nvar xhr = null;\nxhr = new XMLHttpRequest()\n/** 2. 连接服务器 **/\nxhr.open( 'get', url, true)\n/** 3. 发送请求 **/\nxhr.send(null);\n/** 4. 接受请求 **/\nxhr.onreadystatechange = function(){\n  if(xhr.readyState == 4){\n    if(xhr.status == 200){\n      success(xhr.responseText);\n    } else {\n      /** false **/\n      fail && fail(xhr.status);\n    }\n  }\n}",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 9,
                    title: "Ajax原理",
                  },
                  {
                    id: "010202030310",
                    status: 1,
                    cont_type: 3,
                    content: [
                      '首先了解下浏览器的同源策略 同源策略 /SOP ( Same origin policy) 是⼀种约定， 由Netscape公司1995年引⼊浏览器， 它是浏览器最核⼼也最基本的安全功能， 如果缺少了同源策略， 浏览器很容易受到 XSS 、 CSFR 等攻击 。所谓同源是指"协议+域名+端口"三者相同， 即便两个不同的域名指向同⼀个ip地址，也非同源',
                      {
                        title: "那么怎样解决跨域问题的呢？",
                        content: [
                          {
                            title: "通过jsonp跨域",
                            cont_type: 5,
                            content:
                              "var script = document. createElement( ' script' ) ;\nscript.type = 'text/javascript';\n// 传参并指定回调执行函数为onBack\nscript.src = 'http://www.....:8080/login?user=admin&callback=onBack';\ndocument.head.appendChild(script);\n// 回调执行函数\nfunction onBack(res) {\nalert(JSON.stringify(res));\n}",
                          },
                          {
                            title: "document.domain + iframe跨域（此方案仅限主域相同， 子域不同的跨域应用场景）",
                            cont_type: 5,
                            content:
                              "1) 父窗口： (http://www.domain.com/a.html)\n < iframe id= \" iframe\" src= \" http: / / child. domain. com/ b. html\" > < / iframe>\n <script>\n document.domain = 'domain.com';\n var user = 'admin';\n </script>\n 2) 子窗口： (http://child.domain.com/b.html)\n document.domain = 'domain.com';\n // 获取父窗口中变量\n alert( 'get js data from parent ---> ' + window.parent.user);",
                          },
                          "nginx代理跨域",
                          "nodejs中间件代理跨域",
                          "后端在头部信息里面设置安全域名",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 10,
                    title: "如何解决跨域问题?",
                  },
                  {
                    id: "010202030311",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "立即执行函数,不暴露私有成员",
                      {
                        cont_type: 5,
                        content:
                          "var module1 = ( function( ) {\n  var _count = 0;\n  var m1 = function(){\n    //...\n  };\n  var m2 = function(){\n    //...\n  };\n  return {\n    m1 : m1,\n    m2 : m2\n  };\n})();",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 11,
                    title: "模块化开发怎么做？",
                  },
                  {
                    id: "010202030312",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "defer（只支持 IE）：并行加载 js 文件，会按照页面上 script 标签的顺序执行",
                      "async：并行加载 js 文件，下载完成立即执行，不会按照页面上 script 标签的顺序执行",
                      "动态创建 DOM 方式 ( 用得最多)",
                      "按需异步载⼊ js",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 12,
                    title: "异步加载JS的方式有哪些？",
                  },
                  {
                    id: "010202030313",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "内存泄漏指任何对象在您不再拥有或需要它之后仍然存在",
                      "setTimeout 的第⼀个参数使用字符串而非函数的话，会引发内存泄漏",
                      "闭包 、控制台日志 、循环 (在两个对象彼此引用且彼此保留时，就会产生⼀个循环)",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 13,
                    title: "那些操作会造成内存泄漏？",
                  },
                  {
                    id: "010202030314",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "数据体积方面：JSON 相对 于XML 来讲，数据的体积⼩ ，传递的速度更快些。",
                      "数据交互方面：JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互",
                      "数据描述方面：JSON 对数据的描述性比 XML 较差",
                      "传输速度方面：JSON 的速度要远远快于 XML",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 14,
                    title: "XML和JSON的区别？",
                  },
                  {
                    id: "010202030315",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "CommonJS 是服务器端模块的规范， Node.js 采用了这个规范 。 CommonJS 规范加载模块是同步的，也就是说， 只有加载完成，才能执⾏后面的操作 。 AMD 规范则是非同步加载模块， 允许指定回调函数",
                      "AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对module.exports 或 exports 的属性赋值来达到暴露模块对象的目的",
                      "CommonJS 的规范中，每个 JavaScript ⽂件就是⼀个独立的模块上下⽂ ( modulecontext )， 在这个上下⽂中默认创建的属性都是私有的 。也就是说，在⼀个⽂件定义的变量 ( 还包括函数和类)， 都是私有的，对其他⽂件是不可⻅的。",
                      "CommonJS 是同步加载模块,在浏览器中会出现堵塞情况，所以不适用",
                      "AMD 异步， 需要定义回调 define ⽅式",
                      "es6 ⼀个模块就是⼀个独立的⽂件，该⽂件内部的所有变量，外部⽆法获取 。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量 es6 还可以导出类 、⽅法， 自动适用严格模式",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 15,
                    title: "说说你对AMD和Commonjs的理解",
                  },
                  {
                    id: "010202030316",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "sql注⼊",
                        content: [
                          {
                            title: "原理：",
                            content: "就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串， 最终达到欺骗服务器执行恶意的SQL命令",
                          },
                          {
                            title: "防范：",
                            content: [
                              "永远不要信任用户的输⼊ ，要对用户的输⼊进行校验， 可以通过正则表达式， 或限制⻓度，对单引号和双 - 进行转换等",
                              "永远不要使用动态拼装SQL， 可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取",
                              "永远不要使用管理员权限的数据库连接， 为每个应用使用单独的权限有限的数据库连接",
                              "不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息}",
                            ],
                          },
                        ],
                      },
                      {
                        title: "XSS(cross-site scripting)",
                        content: [
                          {
                            title: "原理：",
                            content:
                              "指的是攻击者往 Web ⻚⾯里插⼊恶意 html 标签或者 javascript 代码 。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加⼀个恶意表单， 当用户提交表单的时候，却把信息传送到攻击者的服务器中， 而不是用户原本以为的信任站点",
                          },
                          {
                            title: "防范：",
                            content: [
                              "首先代码里对用户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；",
                              "其次任何内容写到⻚⾯之前都必须加以encode， 避免不⼩⼼把 html tag 弄出来 。这⼀个层⾯做好， 至少可以堵住超过⼀半的XSS 攻击",
                            ],
                          },
                        ],
                      },
                      {
                        title: "CSRF",
                        content: [
                          {
                            title: "原理",
                            content: ["是⼀种挟制用户在当前已登录的 Web 应用程序上执⾏非本意的操作的攻击⽅法"],
                          },
                          {
                            title: "防范",
                            content: ["服务端的 CSRF 方式方法很多样，但总的思想都是⼀致的，就是在客户端页面增加伪随机数", "通过验证码的方法"],
                          },
                        ],
                      },
                      {
                        title: "XSS与CSRF有什么区别吗？",
                        cont_type: 6,
                        content: [
                          "XSS 是获取信息，不需要提前知道其他用户⻚⾯的代码和数据包 。 CSRF 是代替用户完成指定的动作， 需要知道其他用户⻚⾯的代码和数据包 。要完成⼀次 CSRF 攻击， 受害者必须依次完成两个步骤",
                          "登录受信任网站 A ， 并在本地生成 Cookie",
                          "在不登出 A 的情况下， 访问危险网站 B",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 16,
                    title: "常见web安全及防护原理",
                  },
                  {
                    id: "010202030317",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "同源策略指的是：协议， 域名，端⼝相同， 同源策略是⼀种安全协议",
                      "举例说明： 比如⼀个黑客程序，他利用 Iframe 把真正的银⾏登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容， 这样用户名，密码就轻松到手了。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 17,
                    title: "为什么要有同源限制？",
                  },
                  {
                    id: "010202030318",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "offsetWidth/offsetHeight 返回值包含content + padding + border，效果与e.getBoundingClientRect()相同",
                      "clientWidth/clientHeight 返回值只包含content + padding， 如果有滚动条，也不包含滚动条",
                      "scrollWidth/scrollHeight 返回值包含content + padding + 溢出内容的尺寸",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 18,
                    title: "offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别",
                  },
                  {
                    id: "010202030319",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "对象字面量： var obj = {};",
                      "构造函数： var obj = new Object();",
                      "Object.create(): var obj = Object.create(Object.prototype);",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 19,
                    title: "javascript有哪些方法定义对象",
                  },
                  {
                    id: "010202030320",
                    status: 1,
                    cont_type: 3,
                    content: ["undefined 、 null 、 boolean 、 number 、 string、symbol"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 21,
                    title: "介绍js的基本数据类型",
                  },
                  {
                    id: "010202030321",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "Object 是 JavaScript 中所有对象的父对象",
                      "数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String",
                      "其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 22,
                    title: "介绍js有哪些内置对象",
                  },
                  {
                    id: "010202030322",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "栈：原始数据类型 ( Undefined ， Null ， Boolean ， Number 、 String )",
                      "堆：引用数据类型 ( 对象 、数组和函数)",
                      "两种类型的区别是：存储位置不同；",
                      "原始数据类型直接存储在栈( stack )中的简单数据段， 占据空间⼩ 、大⼩固定，属于被频繁使用数据，所以放入栈中存储；",
                      "引用数据类型存储在堆( heap )中的对象, 占据空间大 、大⼩不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址 。当解释器寻找引用值时，会首先检索其",
                      "在栈中的地址， 取得地址后从堆中获得实体",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 23,
                    title: "JavaScript有几种类型的值",
                  },
                  {
                    id: "010202030323",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "它的功能是把对应的字符串解析成 JS 代码并运⾏",
                      "应该避免使用 eval ，不安全，非常耗性能 ( 2 次，⼀ 次解析成 js 语句，⼀ 次执⾏)",
                      "由 JSON 字符串转换为JSON对象的时候可以用 eval，var obj =eval('('+ str +')')",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 24,
                    title: "eval是做什么的",
                  },
                  {
                    id: "010202030324",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "undefined 表示不存在这个值。",
                      'undefined :是⼀个表示"无"的原始值或者说表示"缺少值"，就是此处应该有⼀个值，但',
                      "是还没有定义 。当尝试读取时会返回 undefined",
                      "例如变量被声明了，但没有赋值时，就等于 undefined",
                      "null 表示⼀个对象被定义了，值为“空值”",
                      "null : 是⼀个对象(空对象, 没有任何属性和方法)",
                      "例如作为函数的参数，表示该函数的参数不是对象；",
                      "在验证 null 时，⼀ 定要使用 === ， 因为 == 无法分别 null 和 undefined",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 25,
                    title: "null， undefined 的区别",
                  },
                  {
                    id: "010202030325",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "use strict 是⼀种 ECMAscript 5 添加的 (严格) 运⾏模式,这种模式使得 Javascript在更严格的条件下运⾏ ,使 JS 编码更加规范化的模式,消除 Javascript 语法的⼀些不合理 、不严谨之处，减少⼀些怪异⾏为",
                      {
                        title: "说说严格模式的限制",
                        content: ["变量必须声明后再使用", "函数的参数不能有同名属性， 否则报错", "不能使用 with 语句", "禁止 this 指向全局对象"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 26,
                    title: 'javascript 代码中的"use strict";是什么意思',
                  },
                  {
                    id: "010202030326",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "同步：浏览器访问服务器请求，用户看得到页面刷新， 重新发请求,等请求完， 页面刷新，新内容出现，用户看到新内容,进⾏下⼀步操作",
                      "异步：浏览器访问服务器请求，用户正常操作， 浏览器后端进⾏请求 。等请求完， 页面不刷新，新内容也会出现，用户看到新内容",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 27,
                    title: "同步和异步的区别",
                  },
                  {
                    id: "010202030327",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "新增模板字符串 ( 为 JavaScript 提供了简单的字符串插值功能)",
                      "箭头函数",
                      "for-of ( 用来遍历数据—例如数组中的值 。)",
                      "arguments 对象可被不定参数和默认参数完美代替。",
                      "ES6 将p romise 对象纳⼊规范，提供了原生的 Promise 对象。",
                      "增加了 let 和 const 命令，用来声明变量。",
                      "增加了块级作用域。",
                      "let 命令实际上就增加了块级作用域。",
                      "还有就是引⼊ module 模块的概念",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 28,
                    title: "谈谈你对ES6的理解",
                  },
                  {
                    id: "010202030328",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤⼀步⼀步实现，使用的时候⼀个⼀个依次调用就可以了",
                      "面向对象是把构成问题事务分解成各个对象， 建立对象的目的不是为了完成⼀个步骤， 而是为了描叙某个事物在整个解决问题的步骤中的⾏为",
                      "面向对象是以功能来划分问题， 而不是步骤",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 29,
                    title: "什么是面向对象编程及面向过程编程， 它们的异同和优缺点",
                  },
                  {
                    id: "010202030329",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "基本思想是使用对象， 类， 继承， 封装等基本概念来进⾏程序设计",
                      {
                        title: "优点",
                        content: [
                          "易维护：采用面向对象思想设计的结构， 可读性高， 由于继承的存在， 即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的",
                          "易扩展",
                          "开发⼯作的重用性 、继承性高， 降低重复⼯作量。",
                          "缩短了开发周期",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 30,
                    title: "面向对象编程思想",
                  },
                  {
                    id: "010202030330",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "可用性 ( Usability)： 产品是否容易上⼿ ，用户能否完成任务，效率如何， 以及这过程中用户的主观感受可好， 是从用户的⻆度来看产品的质量 。可用性好意味着产品质量高， 是企业的核⼼竞争⼒",
                      "可访问性 (Accessibility)： Web内容对于残障用户的可阅读和可理解性",
                      "可维护性 ( Maintainability)：⼀般包含两个层次，⼀ 是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好 。⼆是代码是否容易被⼈理解， 是否容易修改和增强功能。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 31,
                    title: "对web标准、可用性、可访问性的理解",
                  },
                  {
                    id: "010202030331",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "instanceof：arr instanceof Array; //true",
                      "constructor：arr.constructor == Array; //true",
                      "isArray()：Array.isArray(arr); //true",
                      "typOf 函数：const typeOf = (ele) = > Object.prototype.toString.call(ele).split(' ')[1].slice(0,-1); typeOf(arr) === 'Array'; // true",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 32,
                    title: "如何通过JS判断⼀个数组",
                  },
                  {
                    id: "010202030332",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "let 命令不存在变量提升， 如果在 let 前使用，会导致报错",
                      "如果块区中存在 let 和 const 命令，就会形成封闭作用域",
                      "不允许重复声明， 因此，不能在函数内部重新声明参数",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 33,
                    title: "谈⼀谈let与var的区别",
                  },
                  {
                    id: "010202030333",
                    status: 1,
                    cont_type: 1,
                    content: [
                      '简单说， "函数式编程"是⼀种"编程范式" ( programming paradigm)， 也就是如何编写程序的方法论',
                      '它具有以下特性： 闭包和高阶函数 、惰性计算 、递归 、函数是"第⼀等公民"、只用"表达式"',
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 34,
                    title: "谈⼀谈你理解的函数式编程",
                  },
                  {
                    id: "010202030334",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "函数体内的 this 对象，就是定义时所在的对象， 而不是使用时所在的对象",
                      "不可以当作构造函数，也就是说，不可以使用 new 命令， 否则会抛出⼀个错误",
                      "不可以使用 arguments 对象，该对象在函数体内不存在 。如果要用， 可以用 Rest 参数代替",
                      "不可以使用 yield 命令， 因此箭头函数不能用作 Generator 函数",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 35,
                    title: "谈⼀谈箭头函数与普通函数的区别？",
                  },
                  {
                    id: "010202030335",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "this的指向在函数定义的时候是确定不了的， 只有函数执⾏的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象",
                      {
                        title: "《javascript语⾔精髓》 中大概概括了4种调用方式：",
                        content: ["方法调用模式", "函数调用模式", "构造器调用模式", "pply/call调用模式"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 36,
                    title: "谈⼀谈函数中this的指向",
                  },
                  {
                    id: "010202030336",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "数据类型 、运算 、对象 、Function、继承 、闭包 、作用域 、原型链 、事件 、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏 、跨域 、异步装载 、模板引擎 、前端 MVC 、 路由 、模块化 、 Canvas 、 ECMAScript",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 37,
                    title: "对原生Javascript了解程度",
                  },
                  {
                    id: "010202030337",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "CSS3 的动画的优点",
                        content: ["在性能上会稍微好⼀些， 浏览器会对 CSS3 的动画做⼀些优化", "代码相对简单"],
                      },
                      {
                        title: "缺点",
                        content: ["在动画控制上不够灵活", "兼容性不好"],
                      },
                      "JavaScript 的动画正好弥补了这两个缺点，控制能⼒很强， 可以单帧的控制 、变换， 同时写得好完全可以兼容 IE6 ， 并且功能强大 。对于⼀些复杂控制的动画，使用javascript 会比较靠谱 。而在实现⼀些⼩的交互动效的时候，就多考虑考虑 CSS 吧",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 38,
                    title: "Js动画与CSS动画区别及相应实现",
                  },
                  {
                    id: "010202030338",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 39,
                    title: "JS 数组和对象的遍历方式，以及几种方式的比较",
                  },
                  {
                    id: "010202030339",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "创建新节点",
                        content: [
                          "createDocumentFragment() //创建⼀个DOM片段",
                          "createElement() //创建⼀个具体的元素",
                          "createTextNode() //创建⼀个文本节点",
                        ],
                      },
                      {
                        title: "添加、移除、替换、插入",
                        content: ["appendChild()  //添加", "removeChild()  //移除", "replaceChild()  //替换", "insertBefore()  //插入"],
                      },
                      {
                        title: "查找",
                        content: [
                          "getElementsByTagName() //通过标签名称",
                          "getElementsByName() //通过元素的Name属性的值",
                          "getElementById() //通过元素Id， 唯⼀性",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 40,
                    title: "怎样添加、移除、移动、复制、创建和查找节点",
                  },
                  {
                    id: "010202030340",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "全局变量",
                        content: ["Infinity 代表正的无穷大的数值。", "NaN 指示某个值是不是数字值。", "undefined 指示未定义的值。"],
                      },
                      {
                        title: "全局函数",
                        content: [
                          "decodeURI() 解码某个编码的 URI 。",
                          "decodeURIComponent() 解码⼀个编码的 URI 组件。",
                          "encodeURI() 把字符串编码为 URI。",
                          "encodeURIComponent() 把字符串编码为 URI 组件。",
                          "escape() 对字符串进行编码。",
                          "eval() 计算 JavaScript 字符串， 并把它作为脚本代码来执行。",
                          "isFinite() 检查某个值是否为有穷大的数。",
                          "isNaN() 检查某个值是否是数字。",
                          "Number() 把对象的值转换为数字。",
                          "parseFloat() 解析⼀个字符串并返回⼀个浮点数。",
                          "parseInt() 解析⼀个字符串并返回⼀个整数。",
                          "String() 把对象的值转换为字符串。",
                          "unescape() 对由 escape() 编码的字符串进行解码",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 41,
                    title: "Javascript全局函数和全局变量",
                  },
                  {
                    id: "010202030341",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "减少 HTTP 请求数",
                      "减少 DNS 查询",
                      "使用 CDN",
                      "避免重定向",
                      "图片懒加载",
                      "减少 DOM 元素数量",
                      "75/115",
                      "2023/4",
                      "使用外部 JavaScript",
                      "压缩 JavaScript 、",
                      "优化 CSS Sprite",
                      "使用 iconfont",
                      "第⼀部分：基础篇 | EncodeStudio 和 CSS",
                      "CSS 、字体 、图片等",
                      "字体裁剪",
                      "多域名分发划分内容到不同域名",
                      "尽量减少 iframe 使用",
                      "避免图片 src 为空",
                      "把样式表放在 link 中",
                      "把 JavaScript 放在页面底部",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 42,
                    title: "项目做过哪些性能优化？",
                  },
                  {
                    id: "010202030342",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "浏览器缓存分为强缓存和协商缓存 。当客户端请求某个资源时， 获取缓存的流程如下",
                      "先根据这个资源的⼀些 http header 判断它是否命中强缓存， 如果命中，则直接从本地获取缓存资源，不会发请求到服务器；",
                      "当强缓存没有命中时，客户端会发送请求到服务器， 服务器通过另⼀些 request header验证这个资源是否命中协商缓存，称为 http 再验证， 如果命中， 服务器将请求返回，但不返回资源， 而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；",
                      "强缓存和协商缓存共同之处在于， 如果命中缓存， 服务器都不会返回资源； 区别是， 强缓存不对发送请求到服务器，但协商缓存会。",
                      "当协商缓存也没命中时， 服务器就会将资源发送回客户端。",
                      "当 ctrl+f5 强制刷新网页时， 直接从服务器加载，跳过强缓存和协商缓存；",
                      "当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存；",
                      {
                        title: "强缓存",
                        content: [
                          "实现强缓存可以通过两种响应头实现： Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code 为 200",
                          "Expires ( 该字段是 http1.0串，代表缓存资源的过期时间)",
                          "时的规范，值为⼀个绝对时间的 GMT 格式的时间字符",
                          "Cache-Control:max-age ( 该字段是 http1.1 的规范， 强缓存利用其 max-age 值来判断缓存资源的最大生命周期， 它的值单位为秒)",
                        ],
                      },
                      {
                        title: "协商缓存",
                        content: [
                          "Last-Modified ( 值为资源最后更新时间， 随服务器response返回)",
                          "If-Modified-Since ( 通过比较两个时间来判断资源在两次请求期间是否有过修改， 如果没有修改，则命中协商缓存)",
                          "ETag (表示资源内容的唯⼀标识， 随服务器 response 返回)",
                          "If-None-Match ( 服务器通过比较请求头部的 If-None-Match 与当前资源的 ETag 是否⼀致来判断资源是否在两次请求之间有过修改， 如果没有修改，则命中协商缓存)",
                        ],
                      },
                      {
                        title: "选择合适的缓存策略",
                        content: [
                          "对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在⼀些特殊的地方可能需要选择特殊的缓存策略",
                          "对于某些不需要缓存的资源， 可以使用 Cache-control: no-store ，表示该资源不需要缓存",
                          "对于频繁变动的资源， 可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。",
                          "对于代码文件来说， 通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进⾏指纹处理，⼀ 旦文件名变动就会立刻下载新的文件",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 43,
                    title: "浏览器缓存",
                  },
                  {
                    id: "010202030343",
                    status: 1,
                    cont_type: 1,
                    content: ["electron 实际上是⼀个套了 Chrome 的 nodeJS 程序。", "Chrome ( ⽆各种兼容性问题)；", "Chrome ( ⽆各种兼容性问题)；"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 44,
                    title: "尽可能多的说出你对 Electron 的理解",
                  },
                  {
                    id: "010202030344",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "浅拷贝：只复制⼀份原始对象的引用",
                      "深拷贝：对原始对象属性所引用的对象进行进行递归拷贝",
                      {
                        title: "JSON.parse(JSON.stringify(object))的局限性",
                        content: ["会忽略 undefined", "不能序列化函数", "不能解决循环引用的对象"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 45,
                    title: "深浅拷贝",
                  },
                  {
                    id: "010202030345",
                    status: 1,
                    cont_type: 1,
                    content: ["防抖：", "节流："],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 46,
                    title: "防抖/节流",
                  },
                  {
                    id: "010202030346",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "定义：",
                      {
                        content: "同名变量忽略原则;同名函数覆盖原则；同名函数和变量覆盖原则",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 47,
                    title: "谈谈变量提升？",
                  },
                  {
                    id: "010202030347",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "单线程 - 只有⼀个线程， 只能做⼀件事",
                      {
                        title: "原因 - 避免 DOM 渲染的冲突",
                        content: [
                          "浏览器需要渲染 DOM",
                          "JS 可以修改 DOM 结构",
                          "JS 执行的时候， 浏览器 DOM 渲染会暂停",
                          "两段 JS 也不能同时执行 (都修改 DOM 就冲突了)",
                          "webworker 支持多线程，但是不能访问 DOM",
                        ],
                      },
                      "解决方案 - 异步",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 48,
                    title: "什么是单线程，和异步的关系",
                  },
                  {
                    id: "010202030348",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "首先， js 是单线程的， 主要的任务是处理用户的交互， 而用户的交互无非就是响应 DOM 的增删改，使用事件队列的形式，⼀ 次事件循环只处理⼀个事件响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件，那么事件队列的事件从哪里被 push 进来的呢 。那就是另外⼀个线程叫事件触发线程做的事情了，他的作用主要是在定时触发器线程 、异步 HTTP 请求线程满足特定条件下的回调函数 push 到事件队列中， 等待 js 引擎空闲的时候去执行， 当然js引擎执行过程中有优先级之分， 首先js引擎在⼀次事件循环中，会先执行js线程的主任务，然后会去查找是否有微任务microtask ( promise) ， 如果有那就优先执行微任务， 如果没有，在去查找宏任务 macrotask ( setTimeout、setInterval) 进行执行",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 49,
                    title: "说说事件循环机制（event loop）",
                  },
                  {
                    id: "010202030349",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "事件流分为两种，捕获事件流和冒泡事件流",
                      "事件流分为三个阶段，⼀个是捕获节点，⼀个是处于目标节点阶段，⼀个是冒泡阶段",
                      "捕获事件流从根节点开始执行，⼀ 直往子节点查找执行， 直到查找执行到目标节点",
                      "冒泡事件流从目标节点开始执行，⼀ 直往父节点冒泡查找执行， 直到查到到根节点",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 50,
                    title: "说说事件流",
                  },
                  {
                    id: "010202030350",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "可参考：https://segmentfault.com/a/1190000013396601",
                      {
                        cont_type: 5,
                        content:
                          "// 三个常量用于表示状态\nconst PENDING = 'pending'\nconst RESOLVED = 'resolved'\nconst REJECTED = 'rejected'\nfunction MyPromise(fn) {\nconst that = this\nthis.state = PENDING\n// value 变量用于保存 resolve 或者 reject 中传入的值\nthis.value = null\n// 用于保存 then 中的回调， 因为当执行完 Promise 时状态可能还是等待中， 这时候应该把\nthat.resolvedCallbacks = []\nthat.rejectedCallbacks = []\nfunction resolve(value) {\n// 首先两个函数都得判断当前状态是否为等待中\nif(that.state === PENDING) {\nthat.state = RESOLVED\nthat.value = value\n// 遍历回调数组并执行\nthat.resolvedCallbacks.map(cb=>cb(that.value))\n}\n}\nfunction reject(value) {\n  if(that.state === PENDING) {\n    that.state = REJECTED\n    that.value = value\n    that.rejectedCallbacks.map(cb=>cb(that.value))\n    }\n    }\n    // 完成以上两个函数以后，我们就该实现如何执行 Promise 中传入的函数了\n    try {\n    fn(resolve,reject)\n    }cach(e){\n    reject(e)\n    }\n}\n// 最后我们来实现较为复杂的 then 函数\nMyPromise.prototype.then = function(onFulfilled,onRejected){\nconst that = this\n// 判断两个参数是否为函数类型， 因为这两个参数是可选参数\nonFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v=>v\nonRejected = typeof onRejected === 'function' ? onRejected : e=>throw e\n// 当状态不是等待态时，就去执行相对应的函数 。如果状态是等待态的话，就往回调函数中 push\nif(this.state === PENDING) {\nthis.resolvedCallbacks.push(onFulfilled)\nthis.rejectedCallbacks.push(onRejected)\n}\nif(this.state === RESOLVED) {\nonFulfilled(that.value)\n}\nif(this.state === REJECTED) {\nonRejected(that.value)\n}\n}",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 51,
                    title: "请手写实现⼀个 promise",
                  },
                  {
                    id: "010202030351",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "caller：",
                        content: [
                          "返回⼀个函数的引用， 这个函数调用了当前的函数。",
                          "这个属性只有当函数在执行时才有用",
                          "如果在 javascript 程序中， 函数是由顶层调用的，则返回 null",
                          "functionName.caller: functionName 是当前正在执行的函数。",
                          {
                            cont_type: 5,
                            content: "function a() {\n console.log(a.caller)\n}",
                          },
                        ],
                      },
                      {
                        title: "callee：",
                        content: [
                          "返回正在执行的函数本身的引用， 它是 arguments 的⼀个属性",
                          "这个属性只有在函数执行时才有效",
                          "它有⼀个 length 属性， 可以用来获得形参的个数， 因此可以用来比较形参和实参个数是否⼀致， 即比较 arguments.length 是否等于 arguments.callee.length",
                          {
                            title: "它可以用来递归匿名函数",
                            cont_type: 5,
                            content: "function a() {\n  console.log(arguments.callee)\n}",
                          },
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 52,
                    title: "caller 和 callee 的区别",
                  },
                  {
                    id: "010202030352",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "jQuery ajax",
                        content: [
                          {
                            cont_type: 5,
                            content:
                              "$.ajax({\n  type: 'POST',\n  url: url,\n  data: data,\n  dataType: dataType\n  success: function\n  error: function ()\n});",
                          },
                          {
                            title: "优缺点：",
                            content: [
                              "第⼀部分：基础篇 | EncodeStudio 本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮",
                              "基于原生的 XHR 开发， XHR 本身的架构不清晰， 已经有了 fetch 的替代方案",
                              "JQuery 整个项目太大， 单纯使用 ajax 却要引入整个 JQuery 非常的不合理 ( 采取个性化打包的方案⼜不能享受CDN服务)",
                            ],
                          },
                        ],
                      },
                      {
                        title: "axios",
                        content: [
                          {
                            cont_type: 5,
                            content:
                              "axios({\nmethod: 'post',\nurl: '/user/12345',\ndata: {\nfirstName: 'Fred',\nlastName: 'Flintstone'\n}\n})\n.then(function (response) {\nconsole.log(response);\n})\n.catch(function (error) {\nconsole.log(error);\n});",
                          },
                          {
                            title: "优缺点：",
                            content: [
                              "从浏览器中创建 XMLHttpRequest",
                              "从 node.js 发出 http 请求",
                              "支持 Promise API",
                              "拦截请求和响应",
                              "转换请求和响应数据",
                              "取消请求",
                              "自动转换 JSON 数据",
                              "客户端支持防止 CSRF/XSRF",
                            ],
                          },
                        ],
                      },
                      {
                        title: "fetch",
                        content: [
                          {
                            cont_type: 5,
                            content:
                              'try {\n  let response = await fetch(url);\n  let data = response.json();\n  console.log(data);\n} catch(e) {\n  console.log("Oops, error", e);\n}',
                          },
                          {
                            title: "优缺点：",
                            content: [
                              "fetch 只对⽹络请求报错，对 400 ， 500 都当做成功的请求， 需要封装去处理",
                              "fetch 默认不会带 cookie ， 需要添加配置项",
                              "fetch 不支持 abort ，不支持超时控制，使用 setTimeout 及 Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行， 造成了量的浪费",
                              "fetch 没有办法原生监测请求的进度， 而XHR可以",
                            ],
                          },
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 53,
                    title: "ajax 、axios 、fetch区别",
                  },
                  {
                    id: "010202030353",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "定义：多台服务器共同协作，不让其中某⼀台或几台超额工作，发挥服务器的最大作用",
                      "http 重定向负载均衡：调度者根据策略选择服务器以302响应请求， 缺点只有第⼀次有效果，后续操作维持在该服务器 dns负载均衡：解析域名时，访问多个 ip 服务器中的⼀个( 可监控性较弱)",
                      "反向代理负载均衡：访问统⼀的服务器， 由服务器进行调度访问实际的某个服务器，对统⼀的服务器要求大，性能受到 服务器群的数量",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 54,
                    title: "负载均衡",
                  },
                  {
                    id: "010202030354",
                    status: 1,
                    cont_type: 3,
                    content: ["内容分发网络， 基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快 、更稳定。"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 55,
                    title: "CDN",
                  },
                  {
                    id: "010202030355",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "定义：程序中⼰动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。",
                      "js中可能出现的内存泄漏情况，结果：变慢， 崩溃，延迟大等",
                      {
                        title: "原因：",
                        content: ["全局变量", "dom 清空时， 还存在引用", "ie 中使用闭包", "定时器未清除", "⼦元素存在引起的内存泄露"],
                      },
                      {
                        title: "避免策略",
                        content: [
                          "减少不必要的全局变量， 或者生命周期较长的对象，及时对无用的数据进行垃圾回收；",
                          "注意程序逻辑， 避免“死循环”之类的；",
                          "避免创建过多的对象 原则：不用了的东西要及时归还。",
                          "减少层级过多的引用",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 56,
                    title: "内存泄漏",
                  },
                  {
                    id: "010202030356",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "ES6、7 代码输⼊ -> babylon 进行解析 -> 得到 AST ( 抽象语法树) ->plugin 用b abel-traverse 对 AST 树进行遍历转译 ->得到新的 AST 树->用 babel-generator 通过 AST 树生成 ES5 代码",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 57,
                    title: "babel原理",
                  },
                  {
                    id: "010202030357",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "后端每次路由请求都是重新访问服务器",
                      "前端路由实际上只是 JS 根据 URL 来操作 DOM 元素，根据每个页面需要的去服务端请求数据， 返回数据后和模板进行组合",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 58,
                    title: "前后端路由差别",
                  },
                  {
                    id: "010202030358",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "call 和 apply 都是为了解决改变 this 的指向 。作用都是相同的， 只是传参的方式不同。除了第⼀个参数外， call 可以接收⼀个参数列表， apply 只接受⼀个参数数组。",
                      "bind 和其他两个方法作用也是⼀致的， 只是该方法会返回⼀个函数 。并且我们可以通过 bind 实现柯里化",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 59,
                    title: "bind 、call 、apply 区别",
                  },
                  {
                    id: "010202030359",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "每个函数都有prototype属性， 除了 Function.prototype.bind() ，该属性指向原型。",
                      "每个对象都有__proto__属性，指向了创建该对象的构造函数的原型 。其实这个属性指向了 [[prototype]] ，但是 [[prototype]] 是内部属性， 我们并不能访问到，所以使用 _proto_ 来访问。",
                      "对象可以通过__proto__来寻找不属于该对象的属性， __proto__ 将对象连接起来组成了原型链。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 60,
                    title: "简单说下原型链？",
                  },
                  {
                    id: "010202030360",
                    status: 1,
                    cont_type: 3,
                    content: ["前者存储在栈上， 后者存储在堆上"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 71,
                    title: "基本数据类型和引用类型在存储上的差别",
                  },
                  {
                    id: "010202030361",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "众所周知 JS 是门非阻塞单线程语言， 因为在最初 JS 就是为了和浏览器交互而诞生的 。如果 JS 是门多线程的语言话， 我们在多个线程中处理 DOM 就可能会发生问题 (⼀个线程中新加节点， 另⼀个线程中删除节点)， 当然可以引⼊读写锁解决这个问题。",
                      "微任务包括 process.nextTick ， promise ， Object.observe ，MutationObserver",
                      "宏任务包括 script ，UI renderin",
                      {
                        cont_type: 6,
                        content: [
                          "很多⼈有个误区，认为微任务快于宏任务， 其实是错误的 。因为宏任务中包括了 script ， 浏览器会先执⾏⼀个宏任务，接下来有异步代码的话就先执⾏微任务",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 72,
                    title: "浏览器 Eventloop 和 Node 中的有什么区别",
                  },
                  {
                    id: "010202030362",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "typeof示例",
                        cont_type: 5,
                        content:
                          "typeof 1 // ' number' typeof '1' // 'string'\ntypeof undefined // 'undefined'\ntypeof true // 'boolean'\ntypeof Symbol() // 'symbol'\ntypeof b // b 没有声明，但是还会显示 undefined\ntypeof [] // 'object' typeof {} // 'object'\ntypeof console.log // 'function'\ntypeof null // 'object'",
                      },
                      "instanceof 可以正确的判断对象的类型， 因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 73,
                    title: "typeof 于 instanceof 区别",
                  },
                  {
                    id: "010202030363",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 74,
                    title: "cookie和localSrorage 、session 、indexDB 的区别",
                  },
                  {
                    id: "010202030364",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "Load 事件触发代表页面中的 DOM ， CSS ， JS ， 图片已经全部加载完毕 。",
                      "DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待CSS ， JS ， 图片加载",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 75,
                    title: "怎么判断页面是否加载完成？",
                  },
                  {
                    id: "010202030365",
                    status: 1,
                    cont_type: 1,
                    content: ["JSONP", "CORS", "document.domain", "postMessage"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 76,
                    title: "如何解决跨域",
                  },
                  {
                    id: "010202030366",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "这种方式通常用于获取嵌⼊页面中的第三方页面数据 。⼀个页面发送消息， 另⼀个页面判断来源并接收消息",
                      {
                        cont_type: 5,
                        content:
                          "// 发送消息端\nwindow.parent.postMessage( 'message', 'http://test.com')\n// 接收消息端\nvar mc = new MessageChannel()\nmc.addEventListener( 'message', event => {\nvar origin = event.origin || event.originalEvent.origin\nif (origin === 'http://test.com') {\nconsole.log( '验证通过')\n}\n})",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 76,
                    title: "postMessage",
                  },
                  {
                    id: "010202030367",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理 。它们旨在 ( 除其他之外) 使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作 。他们还允许访问推送通知和后台同步API",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 77,
                    title: "Service worker",
                  },
                  {
                    id: "010202030368",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "重绘和回流是渲染步骤中的⼀⼩节，但是这两个步骤对于性能影响很大。",
                      "重绘是当节点需要更改外观而不会影响布局的， 比如改变 color 就叫称为重绘",
                      "回流是布局或者⼏何属性需要改变就称为回流。",
                      "回流必定会发生重绘， 重绘不⼀定会引发回流 。回流所需的成本比重绘高的多， 改变深层次的节点很可能导致父节点的⼀系列回流。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 78,
                    title: "浏览器性能问题：重绘 ( Repaint) 和回流 ( Reflow)",
                  },
                  {
                    id: "010202030369",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "转Boolean：在条件判断时， 除了 undefined ， null ， false ，0 ， -0 ， 其他所有值都转为 true ， 包括所有对象",
                      "对象转基本类型：对象在转换基本类型时， 首先会调用 valueOf 然后调用 toString 。并且这两个方法你是可以重写的",
                      {
                        title: "四则运算符",
                        cont_type: 5,
                        content:
                          "1 + '1' // '11' 2 * '2' // 4\n[1, 2] + [2, 1] // '1,22,1'\n[1, 2].toString() -> '1,2'\n[2, 1].toString() -> '2,1'\n'1,2' + '2,1' = '1,22,1'\n'a' + + 'b' // -> \"aNaN\"     //因为 + 'b' -> NaN",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 79,
                    title: "类型转换",
                  },
                  {
                    id: "010202030370",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        title: "当执行 JS 代码时，会产生三种执行上下文：",
                        content: ["全局执行上下文", "函数执行上下文", "eval 执行上下文"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 80,
                    title: "执行上下文",
                  },
                  {
                    id: "010202030371",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "DNS 预解析",
                        content: [
                          "DNS 解析也是需要时间的， 可以通过预解析的方式来预先获得域名所对应的 IP",
                          {
                            cont_type: 5,
                            content: '<link rel="dns-prefetch" href="//blog.poetries.top">',
                          },
                        ],
                      },
                      {
                        title: "预加载：可以⼀定程度上降低首屏的加载时间， 因为可以将⼀些不影响首屏但重要的⽂件延后加载， 唯⼀缺点就是兼容性不好",
                        cont_type: 5,
                        content: '< link rel= " preload" href= " http: / / example. com" >',
                      },
                      {
                        title: "预渲染：虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开， 否则就白白浪费资源去渲染",
                        cont_type: 5,
                        content: '< link rel= " prerender" href= " http: / / poetries. com" >',
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 81,
                    title: "性能",
                  },
                  {
                    id: "010202030372",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？",
                      "函数提升优先于变量提升， 函数提升会把整个函数挪到作用域顶部， 变量提升只会把声明挪到作用域顶部",
                      "var 存在提升， 我们能在声明之前使用 。 let 、 const 因为暂时性死区的原因，不能在声明前使用",
                      "var 在全局作用域下声明变量会导致变量挂载在 window 上， 其他两者不会",
                      "let 和 const 作用基本⼀致，但是后者声明的变量不能再次赋值",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 82,
                    title: "var 、let 及 const 区别",
                  },
                  {
                    id: "010202030373",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 83,
                    title: "原型继承和 Class 继承",
                  },
                  {
                    id: "010202030374",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "因为 JS 采用 IEEE 754 双精度版本 ( 64 位)， 并且只要采用 IEEE 754 的语言都有该问题",
                      "解决：parseFloat( (0.1 + 0.2).toFixed(10)) === 0.3 // true",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 84,
                    title: "为什么 0.1 + 0.2 != 0.3",
                  },
                  {
                    id: "010202030375",
                    status: 1,
                    cont_type: 3,
                    content: [
                      {
                        title: "从缓存位置上来说分为四种， 并且各自有优先级， 当依次查找缓存且都没有命中的时候，才会去请求网络",
                        content: ["Service Worker", "Memory Cache", "Disk Cache", "Push Cache", "网络请求 "],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 85,
                    title: "缓存位置",
                  },
                  {
                    id: "010202030376",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 86,
                    title: "浏览器渲染原理",
                  },
                  {
                    id: "010202030377",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "使用 transform 替代 top",
                      "使用 visibility 替换 display: none ， 因为前者只会引起重绘，后者会引发回流( 改变了布局)",
                      "不要把节点的属性值放在⼀个循环里当成循环里的变量",
                      "不要使用 table 布局， 可能很⼩的⼀个⼩改动会造成整个 table 的重新布局",
                      "动画实现的速度的选择， 动画速度越快， 回流次数越多，也可以选择使用requestAnimationFrame",
                      "CSS 选择符从右往左匹配查找， 避免节点层级过多",
                      "将频繁重绘或者回流的节点设置为图层， 图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说， 浏览器会自动将该节点变为图层。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 87,
                    title: "减少重绘和回流",
                  },
                  {
                    id: "010202030378",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 88,
                    title: "函数柯里化",
                  },
                  {
                    id: "010202030379",
                    status: 1,
                    cont_type: 3,
                    content: ["尾递归，即在函数尾位置调⽤⾃身（或是⼀个尾调⽤本身的其他函数等等）。尾递归也是递归的⼀种特殊情形。"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 89,
                    title: "尾递归",
                  },
                  {
                    id: "010202030380",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 90,
                    title: "",
                  },
                  {
                    id: "010202030381",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ， 其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array) ，对应的 radix 不合法导致解析失败。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1026,
                    title: '["1", "2", "3"].map(parseInt) 答案是多少',
                  },
                  {
                    id: "010202030382",
                    status: 1,
                    cont_type: 5,
                    content: [
                      "var arr = [1,2,3,4,5,6,7,8,9,10];",
                      "arr.sort(function(){",
                      "  return Math.random() - 0.5;",
                      "})",
                      "console.log(arr);",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1027,
                    title: "快速的让⼀个数组乱序",
                  },
                  {
                    id: "010202030383",
                    status: 1,
                    cont_type: 3,
                    content: ["[...new Set(arr)]"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1028,
                    title: "数组去重方法总结",
                  },
                  {
                    id: "010202030384",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "< input id=\" input\"/ >\n  const data = {};\n  const input = document.getElementById( 'input');\n  Object.defineProperty(data, 'text', {\n    set(value) {\n      input.value = value;\n      this.value = value;\n    }\n  });\n  input.onChange = function(e) {\n   data.text = e.target.value;\n}",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1029,
                    title: "请简单实现双向数据绑定 mvvm",
                  },
                  {
                    id: "010202030385",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1030,
                    title: "写⼀段JS程序提取URL中的各个GET参数",
                  },
                  {
                    id: "010202030386",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1031,
                    title: "实现每隔⼀秒钟输出1,2,3...数字",
                  },
                  {
                    id: "010202030387",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1032,
                    title: "实现⼀个函数clone",
                  },
                  {
                    id: "010202030388",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "通过父页面 window.open() 和子页面 postMessage",
                      "异步下， 通过 window.open('about: blank') 和 tab.location.href = '*' 设置同域下共享的 localStorage 与监听 window.onstorage",
                      "重复写入相同的值无法触发",
                      "会受到浏览器隐身模式等的限制",
                      "设置共享 cookie 与不断轮询脏检查( setInterval )",
                      "借助服务端或者中间层实现",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1033,
                    title: "跨标签页通讯",
                  },
                  {
                    id: "010202030389",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "现代浏览器为 JavaScript 创造的 多线程环境 。可以新建并将部分任务分配到 worker 线程并行运行，两个线程可 独立运行， 互不⼲扰， 可通过自带的消息机制 相互通信。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1034,
                    title: "Web Worker",
                  },
                  {
                    id: "010202030390",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1035,
                    title: "",
                  },
                  {
                    id: "010202030391",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1036,
                    title: "",
                  },
                  {
                    id: "010202030392",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1037,
                    title: "",
                  },
                  {
                    id: "010202030393",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1038,
                    title: "",
                  },
                  {
                    id: "010202030394",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1039,
                    title: "",
                  },
                  {
                    id: "010202030395",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 1040,
                    title: "",
                  },
                  {
                    id: "010202030396",
                    status: 1,
                    cont_type: 5,
                    content: [
                      "<! DOCTYPE html>",
                      '<html lang="en">',
                      "<head>",
                      '  <meta charset="UTF-8">',
                      '  <meta name="viewport" content="width=device-width, initial-scale=1.0">',
                      '  <meta http-equiv="X-UA-Compatible" content="ie=edge">',
                      "  <title>Document</title>",
                      "</head>",
                      "<body>",
                      "  <ul>控件</ul>",
                      "  <script>",
                      "    setTimeout(() => {",
                      "      // 插⼊十万条数据",
                      "      const total = 100000",
                      "      // ⼀次插⼊ 20 条，如果觉得性能不好就减少",
                      "      const once = 20",
                      "      // 渲染数据总共需要⼏次",
                      "      const loopCount = total / once",
                      "      let countOfRender = 0",
                      '      let ul = document.querySelector("ul");',
                      "      function add() {",
                      "        // 优化性能，插入不会造成回流",
                      "        const fragment = document.createDocumentFragment();",
                      "        for (let i = 0; i < once; i++) {",
                      '        const li = document.createElement("li");',
                      "        li.innerText = Math.floor(Math.random() * total);",
                      "        fragment.appendChild(li);",
                      "        }",
                      "        ul.appendChild(fragment);",
                      "        countOfRender += 1;",
                      "        loop();",
                      "      }",
                      "      function loop() {",
                      "        if (countOfRender < loopCount) {",
                      "          window.requestAnimationFrame(add);",
                      "        }",
                      "      }",
                      "      loop();",
                      "    }, 0);",
                      "  </script>",
                      "</body>",
                      "</html>",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2028,
                    title: "如何渲染几万条数据并不卡住界面",
                  },
                  {
                    id: "010202030397",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件",
                      "mousedown 事件触发后， 开始拖拽",
                      "mousemove 时， 需要通过 event.clientX 和 clientY 获取拖拽位置， 并实时更新位置",
                      "mouseup 时，拖拽结束",
                      "需要注意浏览器边界的情况",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2029,
                    title: "(设计题) 想实现⼀个对页面某个节点的拖曳？如何做？ (使用原生JS)",
                  },
                  {
                    id: "010202030398",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "该组件需要提供 hook 指定渲染位置， 默认渲染在body下⾯ 。",
                      "然后改组件可以指定外层样式， 如宽度等",
                      "组件外层还需要⼀层 mask 来遮住底层内容，点击 mask 可以执⾏传进来的 onCancel 函数关闭 Dialog 。",
                      "另外组件是可控的， 需要外层传⼊ visible 表示是否可⻅ 。",
                      "然后 Dialog 可能需要自定义头head和底部 footer ， 默认有头部和底部，底部有⼀个确认按钮和取消按钮，确认按钮会执⾏外部传进来的 onOk 事件，然后取消按钮会执⾏外部传进来的 onCancel 事件。",
                      "当组件的 visible 为 true 时候，设置 body 的 overflow 为 hidden ， 隐藏 body 的滚动条， 反之显示滚动条。",
                      "组件高度可能大于⻚⾯高度， 组件内部需要滚动条。",
                      "只有组件的 visible 有变化且为 true 时候，才重渲染组件内的所有内容",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2030,
                    title: "现在要你完成⼀个Dialog组件，说说你设计的思路？ 它应该有什么功能？",
                  },
                  {
                    id: "010202030399",
                    status: 1,
                    cont_type: 5,
                    content: [
                      "// event(事件)工具集，来源：github.com/markyun",
                      "  markyun.Event = {",
                      "  // 视能力分别使用dom0| |dom2 | |IE方式 来绑定事件",
                      "  // 参数： 操作的元素 ,事件名称 ,事件处理程序",
                      "  addEvent : function(element, type, handler) {",
                      "  if (element.addEventListener) {",
                      "  //事件类型 、需要执行的函数 、是否捕捉",
                      "  element.addEventListener(type, handler, false);",
                      "  } else if (element.attachEvent) {",
                      "  element.attachEvent( 'on' + type, function() {",
                      "  handler.call(element);",
                      "  });",
                      "  } else {",
                      "  element [ 'on' + type] = handler;",
                      "  }",
                      "  },",
                      "  // 移除事件",
                      "  removeEvent : function(element, type, handler) {",
                      "  if (element.removeEventListener) {",
                      "  element.removeEventListener(type, handler, false);",
                      "  } else if (element.datachEvent) {",
                      "  element.detachEvent( 'on' + type, handler);",
                      "  } else {",
                      "  element [ 'on' + type] = null;",
                      "  }",
                      "  },",
                      "  // 阻止事件 (主要是事件冒泡， 因为IE不支持事件捕获)",
                      "  stopPropagation : function(ev) {",
                      "    if (ev.stopPropagation) {",
                      "      ev.stopPropagation();",
                      "      } else {",
                      "      ev.cancelBubble = true;",
                      "      }",
                      "    },",
                      "  // 取消事件的默认行为",
                      "  preventDefault : function(event) {",
                      "      if (event.preventDefault) {",
                      "      event.preventDefault();",
                      "      } else {",
                      "      event.returnValue = false;",
                      "      }",
                      "      },",
                      "      // 获取事件目标",
                      "      getTarget : function(event) {",
                      "      return event.target || event.srcElement;",
                      "  }",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2031,
                    title: "写⼀个通用的事件侦听器函数",
                  },
                  {
                    id: "0102020303100",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2032,
                    title: "监控：页面埋点 、性能监控、异常监控",
                  },
                  {
                    id: "0102020303101",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2033,
                    title: "",
                  },
                  {
                    id: "0102020303102",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2034,
                    title: "",
                  },
                  {
                    id: "0102020303103",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2035,
                    title: "",
                  },
                  {
                    id: "0102020303104",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2036,
                    title: "",
                  },
                  {
                    id: "0102020303105",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2037,
                    title: "",
                  },
                  {
                    id: "0102020303106",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2038,
                    title: "",
                  },
                  {
                    id: "0102020303107",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2039,
                    title: "",
                  },
                  {
                    id: "0102020303108",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020303"],
                    },
                    order: 2040,
                    title: "",
                  },
                ],
                title: "JavaScript",
                id: "0102020303",
              },
              {
                label: "Vue",
                topics: [
                  {
                    id: "010202030401",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "vue.js 则是采用数据劫持结合发布者-订阅者模式的⽅式， 通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 1,
                    title: "说⼀下Vue的双向绑定数据的原理",
                  },
                  {
                    id: "010202030402",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202030403",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202030404",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202030405",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202030406",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202030407",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202030408",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202030409",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202030410",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020304"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "Vue",
                id: "0102020304",
              },
              {
                label: "React",
                topics: [
                  {
                    id: "010202030501",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "JSX 上写的事件并没有绑定在对应的真实 DOM 上， 而是通过事件代理的方式，将所有的事件都统⼀绑定在了 document 上 。这样的方式不仅减少了内存消耗， 还能在组件挂载销毁时统⼀订阅和移除事件",
                      "另外冒泡到 document 上的事件也不是原生浏览器事件， 而是 React 自⼰实现的合成事件 ( SyntheticEvent ) 。因此我们如果不想要事件冒泡的话，调用event.stopPropagation 是无效的， 而应该调用 event.preventDefault",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 1,
                    title: "事件机制",
                  },
                  {
                    id: "010202030502",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202030503",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202030504",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202030505",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202030506",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202030507",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202030508",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202030509",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202030510",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020305"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "React",
                id: "0102020305",
              },
              {
                label: "微信小程序",
                topics: [
                  {
                    id: "010202030601",
                    status: 1,
                    cont_type: 3,
                    content: ["使用 wx.getUserInfo ⽅法 withCredentials 为 true 时 可获取encryptedData ， 里面有 union_id 。后端需要进行对称解密"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020306"],
                    },
                    order: 1,
                    title: "小程序关联微信公众号如何确定用户的唯⼀性",
                  },
                  {
                    id: "010202030602",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "OpenId 是⼀个用户对于⼀个小程序／公众号的标识， 开发者可以通过这个标识识别出用户。",
                      "UnionId 是⼀个用户对于同主体微信小程序／公众号／ APP 的标识， 开发者需要在微信开放平台下绑定相同账号的主体 。开发者可通过 UnionId ， 实现多个小程序 、公众号 、甚至APP 之间的数据互通了。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020306"],
                    },
                    order: 2,
                    title: "unionid和openid",
                  },
                  {
                    id: "010202030603",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020306"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202030604",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020306"],
                    },
                    order: 4,
                    title: "",
                  },
                ],
                title: "微信小程序",
                id: "0102020306",
              },
              {
                label: "Jquery",
                topics: [
                  {
                    id: "010202030701",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "jquery 源码封装在⼀个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传⼊ window 对象参数， 可以使 window 对象作为局部变量使用， 好处是当 jquery 中访问 window 对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象 。同样，传⼊ undefined 参数， 可以缩短查找 undefined 时的作用域链",
                      "jquery 将⼀些原型属性和方法封装在了 jquery.prototype 中， 为了缩短名称， ⼜赋值给了 jquery.fn ， 这是很形象的写法",
                      "有⼀些数组或对象的方法经常能使用到， jQuery 将其保存为局部变量以提高访问速度",
                      "jquery 实现的链式调用可以节约代码，所返回的都是同⼀个对象， 可以提高代码效率",
                      {
                        cont_type: 5,
                        content:
                          "(function( window, undefined ) {\n//用⼀个函数域包起来，就是所谓的沙箱\n//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局\n//把当前沙箱需要的外部变量通过函数参数引⼊进来\n//只要保证参数对内提供的接⼝的⼀致性，你还可以随意替换传进来的这个参数\nwindow.jQuery = window.$ = jQuery;\n})( window );",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 1,
                    title: "你觉得jQuery源码有哪些写的好的地方",
                  },
                  {
                    id: "010202030702",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "window.onload() 方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。",
                      "$(document).ready() 是 DOM 结构绘制完毕后就执行，不必等到加载完毕",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 2,
                    title: "window.onload和$(document).ready",
                  },
                  {
                    id: "010202030703",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        cont_type: 5,
                        content: "(function(window, undefined) {})(window);",
                      },
                      "jQuery 利用 JS 函数作用域的特性， 采用立即调用表达式包裹了自身，解决命名空间和变量污染问题",
                      "window.jQuery = window.$ = jQuery;",
                      "在闭包当中将 jQuery 和 $ 绑定到 window 上， 从而将 jQuery 和 $ 暴露为全局变量",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 3,
                    title: "jQuery 的实现原理",
                  },
                  {
                    id: "010202030704",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202030705",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202030706",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202030707",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202030708",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202030709",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202030710",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020307"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "Jquery",
                id: "0102020307",
              },
              {
                label: "Gulp",
                topics: [
                  {
                    id: "010202030801",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "gulp 是前端开发过程中⼀种基于流的代码构建⼯具， 是自动化项目的构建利器；它不仅能对网站资源进行优化， 而且在开发过程中很多重复的任务能够使用正确的⼯具自动完成",
                      "Gulp的核⼼概念：流",
                      "流， 简单来说就是建立在面向对象基础上的⼀种抽象的处理数据的⼯具 。在流中，定义了⼀些处理数据的基本操作， 如读取数据， 写⼊数据等，程序员是对流进⾏所有操作的， 而不用关⼼流的另⼀头数据的真正流向",
                      "gulp正是通过流和代码优于配置的策略来尽量简化任务编写的⼯作",
                      {
                        title: "Gulp的特点：",
                        content: [
                          "易于使用：通过代码优于配置的策略，gulp 让简单的任务简单， 复杂的任务可管理",
                          "构建快速 利用 Node.js 流的威⼒ ，你可以快速构建项目并减少频繁的 IO 操作",
                          "易于学习 通过最少的 API ， 掌握 gulp 毫不费⼒ ，构建⼯作尽在掌握：如同⼀系列流管道",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 1,
                    title: "gulp是什么",
                  },
                  {
                    id: "010202030802",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202030803",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202030804",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202030805",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202030806",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202030807",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202030808",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202030809",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202030810",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020308"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "Gulp",
                id: "0102020308",
              },
              {
                label: "Webpack",
                topics: [
                  {
                    id: "010202030901",
                    status: 1,
                    cont_type: 3,
                    content: [
                      "WebPack 是⼀个模块打包⼯具，你可以使用 WebPack 管理你的模块依赖， 并编绎输出模块们所需的静态文件 。它能够很好地管理 、打包 Web 开发中所用到的 HTML 、Javascript 、 CSS 以及各种静态文件 ( 图片 、字体等)， 让开发过程更加高效 。对于不同类型的资源， webpack 有对应的模块加载器 。 webpack 模块打包器会分析模块间的依赖关系， 最后 生成了优化且合并后的静态资源",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 1,
                    title: "谈谈你对webpack的看法",
                  },
                  {
                    id: "010202030902",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "提取第三⽅库或通过引用外部⽂件的⽅式引⼊第三⽅库",
                      "代码压缩插件 UglifyJsPlugin",
                      "服务器启用gzip压缩",
                      "按需加载资源⽂件 require.ensure",
                      "优化 devtool 中的 source-map",
                      "剥离 css ⽂件， 单独打包",
                      "去除不必要插件， 通常就是开发环境与生产环境用同⼀套配置⽂件导致",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 2,
                    title: "打包体积 优化思路",
                  },
                  {
                    id: "010202030903",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "开发环境采用增量构建，启用热更新",
                        content: ["开发环境不做无意义的工作如提取 css 计算文件hash等", "配置 devtool", "选择合适的 loader"],
                      },
                      "个别 loader 开启 cache 如 babel-loader",
                      "第三方库采用引⼊方式",
                      "提取公共代码",
                      "优化构建时的搜索路径 指明需要构建目录及不需要构建目录",
                      "模块化引⼊需要的部分",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 3,
                    title: "打包效率",
                  },
                  {
                    id: "010202030904",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "loader 就是⼀个 node 模块， 它输出了⼀个函数 。当某种资源需要用这个loader 转换时， 这个函数会被调用 。并且， 这个函数可以通过提供给它的this 上下文访问 Loader API 。 reverse-txt-loader",
                      {
                        cont_type: 5,
                        content:
                          "// 定义\nmodule.exports = function(src) {\n//src是原文件内容 ( abcde)，下面对内容进行处理， 这里是反转\nvar result = src.split( '').reverse().join( '');\n//返回JavaScript源码，必须是String或者Buffer\n  return \"module.exports = '${result} '\";\n}\n//使用\n{\n  test: /.txt$/,\n  use: [{\n    './path/reverse-txt-loader'\n  }]\n},",
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 4,
                    title: "编写⼀个loader",
                  },
                  {
                    id: "010202030905",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "构建优化",
                        content: [
                          "减少编译体积 ContextReplacementPugin 、 IgnorePlugin 、 babel-plugin-import 、 babel-plugin-transform-runtime",
                          "并行编译 happypack 、 thread-loader 、 uglifyjsWebpackPlugin 开启并行",
                          "缓存 cache-loader 、 hard-source-webpack-plugin 、 uglifyjsWebpackPlugin 开启缓存 、 babel-loader 开启缓存",
                          "预编译 dllWebpackPlugin && DllReferencePlugin 、 auto-dll-webapck-plugin",
                        ],
                      },
                      {
                        title: "性能优化",
                        content: [
                          "减少编译体积 Tree-shaking 、 Scope Hositing",
                          "hash 缓存 webpack-md5-plugin",
                          "拆包 splitChunksPlugin 、 import() 、 require.ensure",
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 5,
                    title: "说⼀下webpack的⼀些plugin ， 怎么使用webpack对项目进行优化",
                  },
                  {
                    id: "010202030906",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202030907",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202030908",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202030909",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202030910",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020309"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "Webpack",
                id: "0102020309",
              },
              {
                label: "Vite",
                topics: [
                  {
                    id: "010202031001",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 1,
                    title: "",
                  },
                  {
                    id: "010202031002",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202031003",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202031004",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202031005",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202031006",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202031007",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202031008",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202031009",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202031010",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020310"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "Vite",
                id: "0102020310",
              },
              {
                label: "NodeJs",
                topics: [
                  {
                    id: "010202031101",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "特点：",
                        content: ["它是⼀个 Javascript 运⾏环境", "依赖于 Chrome V8 引擎进⾏代码解释", "事件驱动", "非阻塞 I/O", "单进程， 单线程"],
                      },
                      {
                        title: "优点：",
                        content: ["高并发 ( 最重要的优点)"],
                      },
                      {
                        title: "缺点：",
                        content: ["只⽀持单核 CPU ，不能充分利用 CPU", "可靠性低，⼀ 旦代码某个环节崩溃，整个系统都崩溃"],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 1,
                    title: "Node的应用场景",
                  },
                  {
                    id: "010202031102",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202031103",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202031104",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202031105",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202031106",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202031107",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202031108",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202031109",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202031110",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020311"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "NodeJs",
                id: "0102020311",
              },
              {
                label: "设计模式",
                topics: [
                  {
                    id: "010202031201",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 1,
                    title: "",
                  },
                  {
                    id: "010202031202",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202031203",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202031204",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202031205",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202031206",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202031207",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202031208",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202031209",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202031210",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020312"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "设计模式",
                id: "0102020312",
              },
              {
                label: "代码规范",
                topics: [
                  {
                    id: "010202031301",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "不要在同⼀行声明多个变量",
                      "请使用 ===/!== 来比较 true/false 或者数值",
                      "使用对象字面量替代 new Array 这种形式",
                      "不要使用全局函数",
                      "Switch 语句必须带有 default 分支",
                      "If 语句必须使用大括号",
                      "for-in 循环中的变量 应该使用 var 关键字明确限定作用域，从而避免作用域污",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 1,
                    title: "说几条写JavaScript的基本规范",
                  },
                  {
                    id: "010202031302",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 2,
                    title: "",
                  },
                  {
                    id: "010202031303",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 3,
                    title: "",
                  },
                  {
                    id: "010202031304",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 4,
                    title: "",
                  },
                  {
                    id: "010202031305",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202031306",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202031307",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202031308",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202031309",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202031310",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020313"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "代码规范",
                id: "0102020313",
              },
              {
                label: "计算机网络",
                topics: [
                  {
                    id: "010202031401",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "首行是Request-Line包括：请求方法，请求URI，协议版本， CRLF",
                      "首行之后是若干行请求头， 包括general-header， request-header或者entity-header，每个⼀行以CRLF结束",
                      "请求头和消息实体之间有⼀个CRLF分隔",
                      "根据实际请求需要可能包含⼀个消息实体 ⼀个请求报文例子如下：",
                      {
                        cont_type: 5,
                        content:
                          '\n    GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1\n    Host: www.w3.org\n    Connection: keep-alive\n    Cache-Control: max-age=0\n    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/\n    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML,\n    Referer: https://www.google.com.hk/\n    Accept-Encoding: gzip,deflate,sdch\n    Accept-Language: zh-CN,zh;q=0.8,en;q=0.6\n    Cookie: authorstyle=yes\n    If-None-Match: "2cc8-3e3073913b100"\n    If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT\n    name=qiu&age=25',
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 1,
                    title: "HTTP request报文结构是怎样的",
                  },
                  {
                    id: "010202031402",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "首行是状态行包括：HTTP版本，状态码，状态描述，后面跟⼀个CRLF",
                      "首行之后是若干行响应头， 包括：通用头部，响应头部，实体头部",
                      "响应头部和响应实体之间用⼀个CRLF空行分隔",
                      "最后是⼀个可能的消息实体 响应报文例子如下：",
                      {
                        cont_type: 5,
                        content:
                          '\n    HTTP/1.1 200 OK\n    Date: Tue, 08 Jul 2014 05:28:43 GMT\n    Server: Apache/2\n    Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT\n    ETag: "40d7-3e3073913b100"\n    Accept-Ranges: bytes\n    Content-Length: 16599\n    Cache-Control: max-age=21600\n    Expires: Tue, 08 Jul 2014 11:28:43 GMT\n    P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"\n    Content-Type: text/html; charset=iso-8859-1\n    \n    {"name": "qiu", "age": 25}',
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 2,
                    title: "HTTP response报文结构是怎样的",
                  },
                  {
                    id: "010202031403",
                    status: 1,
                    cont_type: 1,
                    content: [
                      "⽀持双向通信， 实时性更强；",
                      "可以发送⽂本，也可以⼆进制⽂件；",
                      "协议标识符是 ws ，加密后是 wss ；",
                      "较少的控制开销 。连接创建后， ws 客户端 、服务端进行数据交换时，协议控制的数据包",
                      "头部较⼩ 。在不包含头部的情况下， 服务端到客户端的包头只有 2~10 字节 ( 取决于数据",
                      "包长度)， 客户端到服务端的的话， 需要加上额外的4字节的掩码 。而 HTTP 协议每次通信",
                      "都需要携带完整的头部；",
                      "⽀持扩展 。ws协议定义了扩展，用户可以扩展协议， 或者实现自定义的⼦协议 。 ( 比如⽀",
                      "持自定义压缩算法等)",
                      "⽆跨域问题。",
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 3,
                    title: "WebSocket特点",
                  },
                  {
                    id: "010202031404",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 4,
                    title: "http1.0、http1.1、http2.0的区别？",
                  },
                  {
                    id: "010202031405",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 5,
                    title: "",
                  },
                  {
                    id: "010202031406",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 6,
                    title: "",
                  },
                  {
                    id: "010202031407",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 7,
                    title: "",
                  },
                  {
                    id: "010202031408",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 8,
                    title: "",
                  },
                  {
                    id: "010202031409",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 9,
                    title: "",
                  },
                  {
                    id: "010202031410",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020314"],
                    },
                    order: 10,
                    title: "",
                  },
                ],
                title: "计算机网络",
                id: "0102020314",
              },
              {
                label: "数据结构",
                topics: [
                  {
                    id: "010202031501",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020315"],
                    },
                    order: 1,
                    title: "常见排序算法的时间复杂度,空间复杂度",
                  },
                  {
                    id: "010202031502",
                    status: 1,
                    cont_type: 1,
                    content: [
                      {
                        title: "冒泡排序",
                        content: [
                          "每次比较相邻的两个数， 如果后⼀个比前⼀个小，换位置",
                          {
                            cont_type: 5,
                            content: "",
                          },
                        ],
                      },
                      {
                        title: "快速排序",
                        content: [
                          "采用二分法， 取出中间数，数组每次和中间数比较，小的放到左边，大的放到右边",
                          {
                            cont_type: 5,
                            content: "",
                          },
                        ],
                      },
                      {
                        title: "插入排序",
                        content: [
                          "待完善",
                          {
                            cont_type: 5,
                            content: "",
                          },
                        ],
                      },
                      {
                        title: "选择排序",
                        content: [
                          "待完善",
                          {
                            cont_type: 5,
                            content: "",
                          },
                        ],
                      },
                      {
                        title: "归并排序",
                        content: [
                          "待完善",
                          {
                            cont_type: 5,
                            content: "",
                          },
                        ],
                      },
                    ],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020315"],
                    },
                    order: 1,
                    title: "排序算法",
                  },
                ],
                title: "数据结构",
                id: "0102020315",
              },
              {
                label: "Bootstrap",
                topics: [
                  {
                    id: "010202031601",
                    status: 1,
                    cont_type: 3,
                    content: ["待完善"],
                    create_time: 1751181221994,
                    update_time: 1751181221994,
                    classify: {
                      type: ["0102020316"],
                    },
                    order: 1,
                    title: "",
                  },
                ],
                title: "Bootstrap",
                id: "0102020316",
              },
            ],
            title: "前端资料大全",
            id: "01020203",
            topics: [
              {
                id: "0102020301",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
        ],
        title: "综合分类",
        id: "010202",
      },
      {
        label: "实战项目",
        children: [
          {
            label: "开源项目",
            children: [],
            title: "开源项目",
            id: "01020301",
            topics: [
              {
                id: "0102030101",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
        ],
        title: "实战项目",
        id: "010203",
      },
      {
        label: "UI框架",
        children: [
          {
            label: "Bootstrap",
            topics: [
              {
                id: "0102040101",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020401"],
                },
                order: 1,
                title: "",
              },
            ],
            title: "Bootstrap",
            id: "01020401",
          },
        ],
        title: "UI框架",
        id: "010204",
      },
      {
        label: "实战经验",
        children: [
          {
            label: "代码规范",
            topics: [
              {
                id: "0102050101",
                status: 1,
                cont_type: 1,
                content: [
                  "不要在同⼀行声明多个变量",
                  "请使用 ===/!== 来比较 true/false 或者数值",
                  "使用对象字面量替代 new Array 这种形式",
                  "不要使用全局函数",
                  "Switch 语句必须带有 default 分支",
                  "If 语句必须使用大括号",
                  "for-in 循环中的变量 应该使用 var 关键字明确限定作用域，从而避免作用域污",
                ],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 1,
                title: "说几条写JavaScript的基本规范",
              },
              {
                id: "0102050102",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 2,
                title: "",
              },
              {
                id: "0102050103",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 3,
                title: "",
              },
              {
                id: "0102050104",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 4,
                title: "",
              },
              {
                id: "0102050105",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 5,
                title: "",
              },
              {
                id: "0102050106",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 6,
                title: "",
              },
              {
                id: "0102050107",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 7,
                title: "",
              },
              {
                id: "0102050108",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 8,
                title: "",
              },
              {
                id: "0102050109",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 9,
                title: "",
              },
              {
                id: "0102050110",
                status: 1,
                cont_type: 3,
                content: ["待完善"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {
                  type: ["01020501"],
                },
                order: 10,
                title: "",
              },
            ],
            title: "代码规范",
            id: "01020501",
          },
          {
            label: "开发提效",
            children: [],
            title: "开发提效",
            id: "01020502",
            topics: [
              {
                id: "0102050201",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
          {
            label: "最佳实践",
            children: [],
            title: "最佳实践",
            id: "01020503",
            topics: [
              {
                id: "0102050301",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
        ],
        title: "实战经验",
        id: "010205",
      },
      {
        label: "辅助工具",
        children: [
          {
            label: "推荐手册",
            children: [],
            title: "推荐手册",
            id: "01020601",
            topics: [
              {
                id: "0102060101",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
          {
            label: "推荐软件",
            children: [],
            title: "推荐软件",
            id: "01020602",
            topics: [
              {
                id: "0102060201",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
          {
            label: "推荐书籍",
            children: [],
            title: "推荐书籍",
            id: "01020603",
            topics: [
              {
                id: "0102060301",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
          },
        ],
        title: "辅助工具",
        id: "010206",
      },
    ],
    title: "前端资料",
    id: "0102",
  },
  {
    label: "面试相关",
    children: [
      {
        label: "面试真题",
        children: [
          {
            label: "面试题（JS）",
            topics: [
              {
                id: "0103010101",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "面试题（JS）",
            id: "01030101",
          },
          {
            label: "面试题（场景）",
            topics: [
              {
                id: "0103010201",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "面试题（场景）",
            id: "01030102",
          },
          {
            label: "面试题（大厂）",
            topics: [
              {
                id: "0103010301",
                status: 1,
                cont_type: 3,
                content: ["空白内容"],
                create_time: 1751181221994,
                update_time: 1751181221994,
                classify: {},
                order: 1,
                title: "空白标题",
              },
            ],
            title: "面试题（大厂）",
            id: "01030103",
          },
        ],
        title: "面试真题",
        id: "010301",
      },
      {
        label: "简历书写",
        children: [],
        title: "简历书写",
        id: "010302",
        topics: [
          {
            id: "01030201",
            status: 1,
            cont_type: 3,
            content: ["空白内容"],
            create_time: 1751181221994,
            update_time: 1751181221994,
            classify: {},
            order: 1,
            title: "空白标题",
          },
        ],
      },
      {
        label: "面试经验",
        children: [],
        title: "面试经验",
        id: "010303",
        topics: [
          {
            id: "01030301",
            status: 1,
            cont_type: 3,
            content: ["空白内容"],
            create_time: 1751181221994,
            update_time: 1751181221994,
            classify: {},
            order: 1,
            title: "空白标题",
          },
        ],
      },
    ],
    title: "面试相关",
    id: "0103",
  },
];
